vue实现拖拽拉伸容器宽度

效果
在这里插入图片描述

实现逻辑

  • 监听鼠标按下事件,设置滑条背景色,left距离,记录初始位置,捕获鼠标
  • 监听鼠标拖动事件,获取移动的距离,设置左侧区域与右侧区域的宽度,滑条的left值
  • 监听鼠标松开事件,取消事件监听,恢复滑条背景色,释放鼠标

代码

<template>
  <div :class="prefixCls">
    <div ref="wrapRef" :class="`${prefixCls}-content`">
      <div ref="leftRef" :class="`${prefixCls}-aside`">
        <slot name="aside" />
      </div>

      <span ref="resizeRef" class="resize" />

      <div ref="rightRef" :class="[`${prefixCls}-main`, $slots.aside && 'ml']">
        <slot name="header" />
        <div :class="`${prefixCls}-main-content`">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  inheritAttrs: false
}
</script>

<script setup>
import { computed, onMounted, ref, unref, shallowRef } from 'vue'

const prefixCls = computed(() => 'page-layout')

const wrapRef = shallowRef()
const leftRef = ref()
const resizeRef = ref()
const rightRef = ref()

onMounted(() => dragController())

function dragController() {
  const leftEleMinWidth = 271
  const rightEleMinWidth = 500
  unref(resizeRef).onmousedown = function(e) {
    // 设置颜色
    resizeRef.value.style.background = '#3D8BF2'
    const startX = e.clientX
    resizeRef.value.left = unref(resizeRef).offsetLeft
    
    // 鼠标拖动
    document.onmousemove = function({ clientX }) {
      const endX = clientX
      // 移动距离
      let movingDistance = unref(resizeRef).left + (endX - startX)
      // 右边区域宽度
      const rightEleWidth = unref(wrapRef).clientWidth - unref(resizeRef).offsetWidth

	  // 拉伸的宽度不能小于左侧区域的宽度
      if (movingDistance < leftEleMinWidth) movingDistance = leftEleMinWidth
      // 判断最大宽度
      if (movingDistance > rightEleWidth - rightEleMinWidth) movingDistance = rightEleWidth - rightEleMinWidth

	 // 设置左侧区域宽度
      resizeRef.value.style.left = movingDistance
      leftRef.value.style.width = movingDistance + 'px'
      // 设置右侧区域宽度
      rightRef.value.style.width = (unref(wrapRef).clientWidth - movingDistance - 10) + 'px'
    }
    
    // 鼠标松开
    document.onmouseup = function() {
      resizeRef.value.style.background = '#fff'
      document.onmousemove = null
      document.onmouseup = null
      unref(resizeRef)?.releaseCapture?.()
    }
    unref(resizeRef)?.setCapture?.() // 设置鼠标捕获
    return false
  }
}
</script>

<style lang="scss">
.page-layout {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 100%;

  &-content {
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    margin: 16px;
  }

  &-aside {
    overflow: hidden;
    width: 271px;
    padding: 16px 0 16px 16px;
  }

  &-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 16px 16px 0;
    background-color: white;

    &-content {
      flex: auto;
      overflow: hidden;
      padding-top: 16px;
    }
  }

  .resize {
    width: 5px;
    margin: 16px 16px 11px 0;
    cursor: w-resize;
    background-color: #fff;
  }
  }
}
</style>

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中实现拖动改变元素宽度实现宽度自适应的方法如下: 1. 首先,创建一个可拖动的元素,可以使用HTML的`<div>`标签,并给它一个固定的宽度。 2. 在Vue组件中,使用`@mousedown`事件监听鼠标按下的动作,并绑定一个方法来处理拖动事件。 3. 在这个方法中,使用`@mousemove`和`@mouseup`事件来监听鼠标移动和释放的动作,并绑定对应的方法来处理。 4. 在鼠标按下时,记录下鼠标的初始位置和元素的初始宽度。 5. 在鼠标移动时,计算鼠标移动的距离,并根据这个距离计算出新的元素宽度。 6. 更新元素宽度,可以使用Vue的响应式数据或者直接操作DOM元素。 下面是一个示例代码: ```html <template> <div class="draggable" :style="{ width: width + 'px' }" @mousedown="startDragging"> <!-- 内容 --> </div> </template> <script> export default { data() { return { startX: 0, startWidth: 0, width: 200, // 初始宽度 }; }, methods: { startDragging(event) { this.startX = event.clientX; this.startWidth = this.width; document.addEventListener('mousemove', this.drag); document.addEventListener('mouseup', this.stopDragging); }, drag(event) { const dx = event.clientX - this.startX; this.width = this.startWidth + dx; }, stopDragging() { document.removeEventListener('mousemove', this.drag); document.removeEventListener('mouseup', this.stopDragging); }, }, }; </script> <style scoped> .draggable { border: 1px solid #ccc; cursor: col-resize; } </style> ``` 这样,当你拖动可拖动元素时,它的宽度会随着鼠标的移动而改变,并实现宽度自适应效果。注意,在实际项目中,你可能需要根据需求对代码进行适当的修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值