el-drawer二次封装进行可拖拽

3 篇文章 0 订阅

1.想要的效果

鼠标放到上面出现箭头显示可拖拽得图标
在这里插入图片描述

2.代码实现

2.1封装成自定义指令
// drawerDragDirective.js
// 定义指令
const drawerDragDirective = {
  // 指令绑定时的处理函数
  bind(el, ) {
    const minWidth = 300;
    const dragDom = el.querySelector('.el-drawer');
    
    // 创建用于调整大小的元素
    const resizeElL = document.createElement('div');
    const img = new Image(24, 38);
    dragDom.appendChild(resizeElL);
    resizeElL.style.cursor = 'w-resize';
    resizeElL.style.position = 'absolute';
    resizeElL.style.height = '100%';
    resizeElL.style.width = '10px';
    resizeElL.style.left = '4px';
    resizeElL.style.top = '0px';
    img.style.position = 'absolute';
    img.style.left = '-12px';
    img.style.top = '50%';

    
    
    // 鼠标按下事件处理函数
    resizeElL.onmousedown = (e) => {
      const elW = dragDom.clientWidth;
      const EloffsetLeft = dragDom.offsetLeft;
      const clientX = e.clientX;
      
      document.onmousemove = function (e) {
        e.preventDefault();
        // 左侧鼠标拖拽位置
        if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
          // 往左拖拽
          if (clientX > e.clientX) {
            dragDom.style.width = elW + (clientX - e.clientX) + 'px';
          }
          // 往右拖拽
          if (clientX < e.clientX) {
            if (dragDom.clientWidth >= minWidth) {
              dragDom.style.width = elW - (e.clientX - clientX) + 'px';
            }
          }
        }
      }
      // 拉伸结束
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
};

// 导出指令
export default drawerDragDirective;

2.2 注册指令
import clickoutside from './clickoutside';
import dragX from "./dragX";
import elDragx from "./elDragX";
import resize from "./resize";

const Loading = {
    install: function(Vue){
        Vue.directive('clickoutside', clickoutside);
        Vue.directive('dragx', dragX);
        Vue.directive('resize', resize);
        Vue.directive('el-dragx', elDragx);
    }
};

export default Loading;

图片如下:
在这里插入图片描述

2.3在el-drawer中使用

在这里插入图片描述
至此,最终就实现了el-drwer可以通过鼠标进行拖拽来改变宽度。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值