vue拖拽改变宽度

1.封装组件ResizeBox.vue

TypeScript 复制代码
<template>
  <div ref="resize" class="resize">
    <div ref="resizeHandle" class="handle-resize" />
    <slot />
  </div>
</template>
<script>
export default {
  name: 'ResizeBox',
  props: {
    resizeConf: {
      type: Object,
      default: () => ({
        width: 280, // 初始宽度
        widthRange: [100, 500] // 宽度范围
      })
    }
  },
  mounted() {
    this.dragControllerDiv(this.$refs.resize, this.$refs.resizeHandle)
  },
  methods: {
    dragControllerDiv: function(resizeBox, resizeHandle) {
      resizeBox.style.width = this.resizeConf.width + 'px'
      // 鼠标按下事件
      resizeHandle.onmousedown = e => {
        const resizeWidth = resizeBox.offsetWidth
        const startX = e.clientX // 水平坐标
        // 鼠标拖动事件
        document.onmousemove = ev => {
          const moveX = ev.clientX
          const moveLen = resizeWidth + (moveX - startX)
          if (this.resizeConf.widthRange[0] <= moveLen && this.resizeConf.widthRange[1] >= moveLen) {
            resizeBox.style.width = moveLen + 'px'
          }
        }
        // 鼠标松开事件
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.resize {
  background: #fbfbfb;
  position: relative;
  word-wrap: break-word;

  .handle-resize {
    cursor: col-resize;
    position: absolute;
    right: -2px;
    width: 6px;
    height: 50px;
    border-left: 2px solid #c5c5c5;
    border-right: 2px solid #c5c5c5;
    top: calc(50% - 25px);
  }
}
</style>

2.组件中使用

TypeScript 复制代码
<template>
  <div class="container sa-flex">
    <ResizeBox :resize-conf="resizeConf">
      我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边
    </ResizeBox>
    <div class="right sa-flex-1">
      我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边
    </div>
  </div>
</template>
<script>
import ResizeBox from './ResizeBox.vue'
export default {
  components: {
    ResizeBox
  },
  data() {
    return {
      resizeConf: {
        width: 280, // 初始宽度
        widthRange: [100, 500] // 宽度范围
      }
    }
  }
}

</script>
<style lang="scss">
.sa-flex {
  display: flex;
  flex-wrap: no-wrap
}
.sa-flex-1 {
  flex:1
}
.container {
  min-height: 600px;
  background: #eee;
}
</style>
相关推荐
杨进军10 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW25 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字31 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript