Vue.directive的‘dialogDrag‘窗口拖拽

最新推荐文章于 2024-06-17 15:58:57 发布

weixin_52721089

最新推荐文章于 2024-06-17 15:58:57 发布

阅读量846

点赞数 1

本文链接：https://blog.csdn.net/weixin_52721089/article/details/117803515

版权

本文介绍了如何在Vue中创建自定义指令`dialogDrag`来实现对话框的拖拽功能。首先，创建一个包含指令逻辑的文件，然后在Vue组件中引入并应用该指令。在实际应用中，注意可能存在命名冲突问题，可通过更改指令名称如`v-dialog-drag`来避免。

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

首先要创建一个directives.js文件夹，并且在main.js中引入

import './util/directives.js';

在directives.js中写入

import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
   
  bind(el, binding, vnode, oldVnode) {
   
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle