vue自定义指令， 之dialog可拖拽指令封装

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

自定义指令

这里以dialog可拖拽指令举例

1、先在src中创建文件夹 directives，其中建两个文件，一个index.js，一个自定义指令文件

// index.js 自定义指令
 
import draggable from '@/directives/draggable'; // 可拖拽指令
 
export default app => {
  app.directive('draggable', draggable)
}

// draggable.js
const draggable = {
  bind() {},
  inserted(el) {
    el.onmousedown = (e) => {
      let x = e.clientX - el.offsetLeft;
      let y = e.clientY - el.offsetTop;
      document.onmousemove = (e) => {
        let xx = e.clientX - x + "px";
        let yy = e.clientY - y + "px";
        el.style.left = xx;
        el.style.top = yy;
      };
      el.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
}
export default draggable;

2、在main.js 中引入

import Vue from "vue";

import registerDirectives from '@/directives';
registerDirectives(Vue)

3、dialog 中加入指令 v-draggable，即可实现弹框拖拽功能

<el-dialog
    class="previewDialog"
    title="预览"
    :visible.sync="dialogVisible"
    width="1200px"
    :append-to-body="true"
    v-draggable
  >
    <div class="imgPreview" >
    </div>
  </el-dialog>