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

zifengningyu

已于 2024-04-09 11:20:10 修改

阅读量714

点赞数 3

分类专栏： vue 前端文章标签： vue.js javascript ecmascript

于 2024-04-09 11:02:53 首次发布

本文链接：https://blog.csdn.net/zifengningyu/article/details/137543088

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js创建一个自定义指令，实现el-drawer组件的鼠标拖拽功能，允许用户调整其宽度。通过示例代码展示了指令的编写、注册以及在el-drawer中的应用。

摘要由CSDN通过智能技术生成

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;