el-dialog 实现可以拖动的弹窗

吴小花的博客

已于 2024-11-21 13:28:34 修改

阅读量2.8k

点赞数 3

分类专栏： Vue.js 项目实战经验文章标签： vue.js javascript 前端

于 2024-04-18 13:20:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_39089928/article/details/137913524

版权

Vue.js 项目实战经验专栏收录该内容

52 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客详细介绍了如何在Vue.js应用中为el-dialog组件添加拖动功能。通过在el-dialog上添加v-el-drag-dialog指令，并引入index.js及drag.js文件，实现了弹窗的拖动交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现可拖动弹窗。

一、在需要进行拖拽的弹窗组件添加如下代码

1.vue组件 el-dialog组件添加 v-el-drag-dialog

2.引入index 文件

import elDragDialog from '../index.js'

3.引入指令

  directives: {
    elDragDialog
  },

二、index.js文件代码


import drag from './drag'

const install = function(Vue) {
  Vue.directive('el-drag-dialog', drag)
}

if (window.Vue) {
  window['el-drag-dialog'] = drag
  Vue.use(install); // eslint-disable-line
}

drag.install = install
export default drag

三、drag.js文件代码

export default {
  bind(el, binding, vnode) {
    const dialogHeaderEl = el.querySelector(&#

了解本专栏

超级会员免费看