先给下载地址

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. 【electron系列之二】复制图片

    // 复制图片 ipcMain.on("copy",(event, arg) =>{ const imagePath = path.join(appPath, `page/i ...

  2. Spring下的@Inject、@Autowired、@Resource注解区别(转)

    1.@Inject javax.inject JSR330 (Dependency Injection for Java) 这是JSR330中的规范,通过AutowiredAnnotationBean ...

  3. 检查nginx配置,重载配置以及重启的方法

    原文  http://blogread.cn/it/article/4549?f=hot1 几个常用的nginx命令 Nginx 安装后只有一个程序文件,本身并不提供各种管理程序,它是使用参数和系统信 ...

  4. Eclipse导入Maven项目出现:Could not calculate build plan: Plugin org.apache.maven.plugins:maven-war-plugin:2.2

    错误如下: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-war-plugin:2.2 or one of ...

  5. 巧用MySQL AHI加速神器,让你的InnoDB查询飞起来!

    DBAPLUS  http://mp.weixin.qq.com/s/cIjQIz-ZngSYJ3k2ZBBSsg

  6. ArcGIS Engine中的Symbols详解

    转自原文ArcGIS Engine中的Symbols详解 本文由本人翻译ESRI官方帮助文档.尊重劳动成果,转载请注明来源. Symbols ArcObjects用了三种类型的Symbol(符号样式) ...

  7. Spring @Value用法

    Spring 通过注解获取*.porperties文件的内容,除了xml配置外,还可以通过@value方式来获取. 使用方式必须在当前类使用@Component,xml文件内配置的是通过pakage扫 ...

  8. uva live 12846 A Daisy Puzzle Game

    假设下一个状态有必败.那么此时状态一定是必胜,否则此时状态一定是必败 状压DP #include<iostream> #include<map> #include<str ...

  9. js中字符串的拼接的另一种方法

    // 按一定长度截断字符串,并使用 + 运算符进行连接. // 分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开. // 特别的,对于HTML片段的拼接,通过缩进,保持和HTML相同的结构. ...

  10. Android 通过ADB Wireless无线调试应用

    使用数据线调试应用难免不方便,本篇博客介绍使用ADB Wireless工具.当手机和电脑处在同一网络下.实现无线调试应用. ADB Wireless可以让手机用无线来代替USB连接.而使用ADB工具的 ...