先给下载地址

https://files.cnblogs.com/files/maruihua/el-dragDialog.rar

需要注意的是如果给模态框加入拖动指令,一些定位样式会出问题,需谨慎

具体使用方法如下

在引用页面加入以下代码

import elDragDialog from '../../directive/el-dragDialog/index'

export default {

  //自定义指令:拖动模态框

  directives: { elDragDialog },

    methods: {

    handleDrag() {} //拖动模态框事件

  }

}

在dialog中加入这两个属性

 <el-dialog

    v-el-drag-dialog

    @dragDialog="handleDrag" >

  </el-dialog>

就可以了,.有什么自定义的样式可以自己修改源码.

关于element-ui的diallog拖动的实现的更多相关文章

  1. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  2. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  3. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found：'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  4. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  5. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  6. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  7. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  8. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  9. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  10. vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

随机推荐

  1. POJ 2348 Euclid's Game【博弈】

    题目链接: http://poj.org/problem?id=2348 题意: 给定两个数,两个人每次从较大数中减去较小数的倍数,谁先得到0谁获胜,为谁赢? 分析: 令一种可能出现的整数对为(a,b ...

  2. Prime Ring Problem---hdu1016(dfs)

    http://acm.hdu.edu.cn/showproblem.php?pid=1016 这就是一道简单的dfs  但是是我自己想起来的   必须要记录一下 #include<stdio.h ...

  3. 一个Tomcat最多支持多少用户的并发？

    ,也就是说同时支持 另外,在 Java 中每开启一个线程需要耗用 1MB 的 JVM 内存空间用于作为线程栈之用.Tomcat的最大并发数是可以配置的,实际运用中,最大并发数与硬件性能和CPU数量都有 ...

  4. [转] Oracle数据库维护常用SQL语句集合

           原文地址 进程相关: 1. 求当前会话的SID,SERIAL# SELECT Sid, Serial# FROM V$session WHERE Audsid = Sys_Context ...

  5. DATASNAP清除僵死连接

    DATASNAP使用TCP/IP长连接的时候,由于诸如客户端非正常关闭的情况会造成中间件产生僵死SOCKET连接,随着时间的推移,僵死连接越来越多,造成中间件停止服务,表现为客户端无法连接中间件.DE ...

  6. C# 获得图片的分辨率和大小

    double DPI = pictureBox1.Image.HorizontalResolution;//获得分辨率 gisoracle double w = 1.0 * pictureBox1.I ...

  7. 如何使用shell收集linux系统状态，并把结果发给远端服务器

    第一步:收集系统当天状态 load状态 内存状态 cpu状态 jvm相关信息:jstat jstack 网络信息 硬盘信息 第二步:发送到远端服务器 使用curl.wget.定义接口. https:/ ...

  8. Codeforces466C Number of Ways

    题目链接: http://codeforces.com/problemset/problem/466/C 题意: 给一个长度为n的数组,将其分成连续的三段使三段的和相等.求有几种这种组合 分析: 从头 ...

  9. 使用python在极坐标中生成一条直线

    在测试雷达时,往往需要测试雷达的数据是否准确,这时就需要在雷达图中显示一条标准的直线作为对比. "create a wall" import numpy as np import ...

  10. 原始的解释器模式(Interpreter Pattern)

    解释器模式的定义(现实项目中非常少遇到,因此直接理论先...) 解释器模式是一种依照规定语法进行解析的方案,在如今项目中使用较少,其定义为:给定一门语言,定义它的方法的一种表示,并定义一个解释器,该解 ...