基于el-drawer组件封装拖拽、缩放功能

已于 2024-07-21 17:34:46 修改
阅读量592 收藏
点赞数 12
分类专栏： web前端 文章标签： vue.js javascript elementui
于 2024-07-21 17:32:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sugar_ask/article/details/140590743
版权

功能描述：基于vue封装全局自定义指令，满足弹框组件拖拽和缩放大小功能。

1. 生成drawerDrag.js文件
import Vue from 'vue'
// v-drawerDrag: 弹框拖拽+水平方向伸缩+对角线拉伸
Vue.directive('drawerDrag', {
  // el为指令绑定dom
  bind(el) {
    // drawerHeaderEl为标题栏，绑定mousedown事件进行拖拽
    const drawerHeaderEl = el.querySelector('.el-drawer__header')
    // dragDom为指令绑定的dom元素，定义元素便于区分
    const dragDom = el.querySelector('.el-drawer')
    if (!dragDom) {
      return
    }
    // 获取css所有属性兼容性写法 ie dom元素.currentStyle 火狐谷歌  Window.getComputedStyle(dom元素, null)
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    // 定义鼠标按下事件
    const moveDown = e => {
      // e.clientX/e.clientY: 鼠标相对于浏览器可视窗口的X,Y坐标
      // offsetLeft/offsetTop: 当前元素相对于其offsetParent元素的顶部，左边的距离，这里title无定位偏移，故为0
      // 获取元素相对位置
      const disX = e.clientX - drawerHeaderEl.offsetLeft
      const disY = e.clientY - drawerHeaderEl.offsetTop

      // 获取页面可视区宽度、高度兼容写法
      const screenWidth = document.documentElement.clientWidth || document.body.clientWidth
      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight

      // 获取对话框宽度、高度
      const dragDomWidth = dragDom.offsetWidth
      const dragDomHeight = dragDom.offsetHeight

      // 获取对话框边界最小、最大的left值
      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      // 获取对话框边界最小、最大top值
      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight

      // 获取到的值带px在下面需要用正则匹配替换
      let styL = sty.left
      if (styL === 'auto') styL = '0px'  // 为兼容ie写法
      let styT = sty.top

      // 需要注意在ie中 第一次获取到的值为组件自带50% 移动后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }

      // 鼠标移动事件
      document.onmousemove = function (e) {
        el.style.pointerEvents = 'auto' // 层叠样式表css,不穿透
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY

        // 边界左侧处理
        if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft)
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }
        // 边界顶部处理
        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop)
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.left = `${left + styL}px`
        dragDom.style.top = `${top + styT}px`

        // 将此时移动的位置传出去
        // binding.value({ x: e.pageX, y: e.pageY })
      }

      // 鼠标抬起停止弹窗移动
      document.onmouseup = function () {
        el.style.pointerEvents = 'none' // 层叠样式表css,穿透
        document.onmousemove = null
        document.onmouseup = null
      }
    }
    drawerHeaderEl.onmousedown = moveDown

    // 定义鼠标悬停样式
    const CURSORTYPE = {
      top: 'n-resize', // 边缘可被向上移动
      bottom: 's-resize', // 边缘可被向下移动
      left: 'w-resize', // 边缘可被向左移动
      right: 'e-resize', // 边缘可被向右移动
      right_top: 'ne-resize', // 边缘可被向上及向右移动
      left_top: 'nw-resize', // 边缘可被向上及向左移动
      left_bottom: 'sw-resize', // 光标边缘可被向下及向左移动
      right_bottom: 'se-resize', // 光标边缘可被向下及向右移动
      default: 'default', // 默认光标
    }

    // 判断鼠标悬浮指针类型
    const checkType = obj => {
      const { x, y, left, top, width, height } = obj
      let type
      if (x > left + width - 5 && el.scrollTop + y <= top + height - 5 && top + 5 <= y) {
        type = 'right'
      } else if (left + 5 > x && el.scrollTop + y <= top + height - 5 && top + 5 <= y) {
        type = 'left'
      } else if (el.scrollTop + y > top + height - 5 && x <= left + width - 5 && left + 5 <= x) {
        type = 'bottom'
      } else if (top + 5 > y && x <= left + width - 5 && left + 5 <= x) {
        type = 'top'
      } else if (x > left + width - 5 && el.scrollTop + y > top + height - 5) {
        type = 'right_bottom'
      } else if (left + 5 > x && el.scrollTop + y > top + height - 5) {
        type = 'left_bottom'
      } else if (top + 5 > y && x > left + width - 5) {
        type = 'right_top'
      } else if (top + 5 > y && left + 5 > x) {
        type = 'left_top'
      }
      return type || 'default'
    }

    // 判断边界条件
    const boundaryLimit = obj => {
      const { left, top, width, height, diffX, diffY, screenHeight, screenWidth, arr } = obj
      if (arr[0] == 'right' || arr[1] == 'right') {
        if (width + diffX > screenWidth - left) {
          dragDom.style.width = screenWidth - left + 'px'
        } else {
          dragDom.style.width = width + diffX + 'px'
        }
      }
      if (arr[0] == 'left' || arr[1] == 'left') {
        if (width - diffX > width + left) {
          dragDom.style.width = width + left + 'px'
          dragDom.style.left = -parseInt(sty.marginLeft) + 'px'
        } else {
          dragDom.style.width = width - diffX + 'px'
          // left实际值 = left + marginLeft 计算时需要将marginLeft减掉
          dragDom.style.left = left + diffX - parseInt(sty.marginLeft) + 'px'
        }
      }
      if (arr[0] == 'top' || arr[1] == 'top') {
        if (height - diffY > height + top) {
          dragDom.style.height = height + top + 'px'
          dragDom.style.top = -parseInt(sty.marginTop) + 'px'
        } else {
          dragDom.style.height = height - diffY + 'px'
          // top实际值 = top + marginTop 计算时需要将marginTop减掉
          dragDom.style.top = top + diffY - parseInt(sty.marginTop) + 'px'
        }
      }
      if (arr[0] == 'bottom' || arr[1] == 'bottom') {
        if (height + diffY > screenHeight - top) {
          dragDom.style.height = screenHeight - top
        } else {
          dragDom.style.height = height + diffY + 'px'
        }
      }
    }

    // 缩放鼠标移动事件
    dragDom.onmousemove = e => {
      const x = e.clientX
      const y = e.clientY
      const left = dragDom.offsetLeft
      const top = dragDom.offsetTop
      const width = dragDom.clientWidth
      const height = dragDom.clientHeight
      let type = checkType({ x, y, left, top, width, height })
      dragDom.style.cursor = CURSORTYPE[type] || 'default'
    }

    // 缩放鼠标点击事件
    dragDom.onmousedown = e => {
      const x = e.clientX
      const y = e.clientY
      const width = dragDom.clientWidth
      const height = dragDom.clientHeight
      const left = dragDom.offsetLeft
      const top = dragDom.offsetTop
      const screenWidth = document.documentElement.clientWidth || document.body.clientWidth
      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
      let type = checkType({ x, y, left, top, width, height })
      // 判断是否为弹框头部
      if (x > left && x < left + width && y > top + 5 && y < top + drawerHeaderEl.clientHeight) {
        // console.log('走拖拽功能')
      } else {
        // 拉伸开始
        document.onmousemove = function (e) {
          // 移动时禁用默认事件
          e.preventDefault()
          let endX = e.clientX
          let endY = e.clientY
          let diffX = endX - x
          let disY = endY - y
          let arr
          // 将type转换为数组格式，简化代码判断调用
          if (type.indexOf('_') == -1) {
            arr = [type, '']
          } else {
            arr = type.split('_')
          }
          boundaryLimit({ left, top, width, height, diffX, diffY, screenHeight, screenWidth, arr })
        }

        // 拉伸结束
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
})
2.main.js引入
// 全局引入
import '@/utils/drawerDrag.js'
3.页面使用自定义指令
// v-drawerDrag 直接为自定义指令
<template>
  <el-drawer
    title="标题"
    :wrapperClosable="false"
    :modal="false"
    v-drawerDrag
  >
    <span>页面内容展示</span>
  </el-drawer>
</template>

同理el-dialog组件也可直接复用，只需要修改js中获取的class为el-dialog对应的class

此封装指令可跟另一篇el-drawer弹框封装共用

辞忧*
关注
专栏目录
element-ui 抽屉组件（el-drawer ） 二次封装 增加resize拖曳改变宽度大小，配合表格实现快捷方式打开抽屉展示详情及操作
qq_53675083的博客
07-07 5909
可配合自定义表格进行操作数据，点击表格某一行进行抽屉展示，可上下页切换查看及功能操作，1.快捷键esc关闭抽屉，// 快捷键控制上下翻页 shiftKey+上键 上一页 shiftKey加下键 下一页 shiftKey加左键 开启弹框展示第一条数据 shiftKey加右键关闭弹框上代码 js实现拉伸部分......
elementUI可拖拉宽度抽屉
占星安啦的博客
09-05 3905
在elementUI的抽屉基础上，添加可拖动侧边栏宽度的功能
element drawer上下拖动
limmt2020的博客
08-05 862
在App.vue中写样式。在main.js中引入。
el-drawer二次封装进行可拖拽
zifengningyu的博客
04-09 853
el-drawer实现可拖拽
封装el-drawer
qq_38210427的博客
05-30 349
【代码】封装el-drawer。
el-drawer抽屉可伸缩
weixin_47451403的博客
06-07 390
【代码】el-drawer抽屉可伸缩。
Vue 封装导入弹框(el-drawer)模板
qq_42753983的博客
03-22 1345
Vue 封装导入弹框(el-drawer)模板
基于element ui的el-drawer进行组件封装
最新发布
辞忧*的博客
07-20 477
【代码】基于element ui的el-drawer进行组件封装。
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
el-drawer子组件关闭时调用父组件的方法
Xiaqiyule的博客
10-22 2272
父组件： <detailDrawer:showDrawer="showDrawer":id="id"v-if="showDrawer":closeCallBack="closeDrawer"></detailDrawer> </div> </template> <script> importdetailDrawerfrom'./components/DetailDrawer.vue' exp...
关于父组件引用el-drawer的抽屉开合问题
weixin_44011606的博客
07-14 879
饿了么抽屉的开关问题
Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭
金蕊泛流霞
09-26 3960
我们只需要设置这两个 append-to-body :close-on-click-modal="false" 属性。
Element-UI实现el-dialog弹框拖拽功能
觉醒法师的专栏
06-17 4938
在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。
封装可拖拽弹框组件（二）——vue2中，应用可拖拽弹框组件vue-draggable-resizable组件
weixin_44867717的博客
03-05 551
封装可拖拽弹框组件（二）——vue2中，应用可拖拽弹框组件vue-draggable-resizable组件 示例地址——https://www.npmjs.com/package/vue-draggable-resizable 效果 实例 第四步：主页面 src/views/article/articleFat.vue <!-- 资源管理 --> <template> <div> <resource-manage ref="resource"&gt
element form表单二次封装，并做成可拖拽的表单
轮回千载
02-08 1791
今天为大家带来一篇element form表单二次封装，并做成可拖拽的表单 现阶段大部分功能已经完善，后续会添加更多的组件 首先先带搭建看一下页面 项目基于element ui 二次封装后的zx-lib 现在先来说一下zx-lib zx-lib 为element ui 二次封装的form表单以及table组件，现在已上传到npm 大家可以在线使用 使用方法: npm i zx-lib -S main.js 中引用 import zxLib from ‘zx-lib’ Vue.use(zxLib
Element-ui弹框实现拖拽效果（亲测有效）
ljc147258369的博客
12-25 1618
/ 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);// 移动时禁用默认事件。//给弹窗加上overflow auto；// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px。// 鼠标按下，计算当前元素距离可视区的距离。//左侧鼠标拖拽位置。//右侧鼠标拖拽位置。//底部鼠标拖拽位置。// 通过事件委托，计算移动的距离。//判断点击的位置是不是为头部。// 获取到的值带px 正则匹配替换。
element 组件抽屉拖拽左右改变宽度
weixin_42812098的博客
12-21 3099
element-ui组件drawer抽屉实现左右拖拽改变宽度的功能 详情请查看该篇技术博客
页面拖拽更改左右宽度
liluo_1227的博客
07-12 736
效果图 代码部分 <div class="box" ref="box"> <div class="left pd20" ref="left1"> <div style="height:100%"> <el-input v-model="search.roleName" placeholder="搜索角色" clearable .
vue 使用创建元素创建el-drawer打开一个组件
06-06
可以使用以下代码来创建并打开一个使用了`el-drawer`的组件： ```javascript // 导入需要使用的组件和插件 import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import MyComponent from './MyComponent.vue' // 安装 ElementUI 插件 Vue.use(ElementUI) // 创建一个 Vue 实例 const vm = new Vue({ el: '#app', render: h => h(MyComponent) }) // 在实例中创建并打开 el-drawer 组件 const drawer = vm.$createElement('el-drawer', { props: { title: 'Drawer Title', visible: true } }, [ vm.$createElement(MyComponent) ]) document.body.appendChild(drawer.$el) ``` 这里首先导入了需要使用的组件和插件，然后创建了一个 Vue 实例并在其中渲染了 `MyComponent` 组件。最后使用 `vm.$createElement` 方法创建并打开了一个 `el-drawer` 组件，并将 `MyComponent` 组件作为内容插入到了 `el-drawer` 组件中，最终将 `el-drawer` 组件的 `$el` 元素添加到了页面中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值