Element-UI实现el-dialog弹框拖拽功能

        在实际开发中，会发现有些系统，弹框是可以在浏览器的可见区域自由拖拽的，这极大方便用户的操作。但在查看Element-UI中弹框（el-dialog）组件的文档时，发现并未实现这一功能。不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框拖拽的功能。

        对于Vue.directive这里就不再阐述了，上一篇中已作了相关说明，不了解此功能的朋友可以翻看一上篇了解下，地址：Element-UI - 解决el-table中图片悬浮被遮挡问题-CSDN博客，或者去官方文档了解。另外，上篇是通过自定义指令的局部定义方式实现的，此篇将通过全局模式进行定义和开发。

一、演示页面创建

        首先我们在Vue项目中，创建一个页面用于演示拖拽功能的实现。代码如下：

<template>
  <div>
    <div class="right-box">
      <el-button type="primary" size="mini" @click="dialogVisible = true">新增</el-button>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>这是一个弹框，升级其功能，能在浏览器可见区域自由拖拽</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      dialogVisible: false
    }
  },
}
</script>

<style lang="less" scoped>
.right-box{
  text-align: right;
  padding-bottom: 15px;
}
</style>

        界面效果：

二、定义v-dialogDrag

        这里在Vue项目中src/utils目录中创建dialog.js，用来定义Vue-directive('dialogDrag', {})；代码如下：

import Vue from 'vue'
/**
 * 新增弹框拖拽功能
 */
Vue.directive('dialogDrag', {
  bind: (el) => {
    console.log('v-dialogDrag');
  }
})

        在main.js文件中引入dialog.js，代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/utils/dialog.js'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

        页面中的el-dialog标签上添加v-dialogDrag，代码如下：

<template>
  <div>
    <di