给 el-dialog 增加拖拽功能

最新推荐文章于 2023-11-03 10:45:23 发布
最新推荐文章于 2023-11-03 10:45:23 发布
阅读量1.6k 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49471668/article/details/124364353
版权
m0_49471668
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 - 完成实现ElementUI中el-dialog弹窗的拖拽功能（宽度高度适配，且关闭后打开位置居中）
前端充电宝
04-28 706
Vue2 - 完成实现ElementUI中el-dialog弹窗的拖拽功能（宽度高度适配，且关闭后打开位置居中）
【vue3】使用自定义指令，实现el-dialog的拖拽功能。
梅花寺
09-19 1131
因为要自己操作dom（设置事件），所以感觉还是使用自定义指令更直接一些，而且对原生组件的影响更小。const _dialogDrag = {// mounted mounted (el: any, binding: any) {// 监听 dialog 是否显示的状态watch (binding.value, () => {// dialog 不可见，退出if (!
dialog对话框插件鼠标点击弹出可拖动对话框代码
11-10
dialog对话框插件鼠标点击弹出可拖动对话框代码 dialog对话框插件鼠标点击弹出可拖动对话框代码 dialog对话框插件鼠标点击弹出可拖动对话框代码
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element 可移动dialog
昨天1990的专栏
09-10 1855
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...
el-dialog 实现拖拽功能
weixin_42572968的博客
06-20 1188
el-dialog 实现拖拽功能
vue实现element-ui对话框可拖拽功能
10-18
主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实现element-ui中dialog的拖拽
qq_40411455的博客
01-14 986
1、utils文件夹下创建dialog.js文件 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__head...
el-dialog可拖拽
TianQiWanLaiQiu的博客
04-26 778
1、新建文件两位放两个文件。
element组件中对话框的拖拽和初始化
qq_39389646的博客
09-23 600
element组件中对话框的拖拽 创建directives.js import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-element-dialog-drag:支持ElementUI对话框拖动
04-28
Vue元素对话框拖动支持ElementUI对话框拖动用法npm install vue - element - dialog - draggable -- saveimport DlgDraggable from "vue-element-dialog-draggable"Vue . use ( DlgDraggable , { containment : true...
el-drag-dialog.rar
09-03
1.将文件资源放置在directives文件夹下 ...import elDragDialog from '@/directives/el-drag-dialog' Vue.use(elDragDialog) 3.在弹窗组件中使用 <el-dialog append-to-body v-el-drag-dialog > </el-dialog>
vue3项目中引入dialog插件，支持最大最小化、还原、拖拽
SunFlower914的博客
08-08 1960
上图是layui-vue组件库中的layer插件，我的项目使用的是element-plus组件库，在用不上layui组件库的情况下，就单独引入。2.在需要展示弹层的位置引入弹层组件或函数（layer弹层支持以函数/标签的形式使用）1.按照npm地址的Readme操作，在mainjs中引入插件并全局注册。具体的API见上方layui-vue组件库地址。这个弹层插件就可以了。
vue3+element Plus实现弹框的拖拽、可点击底层页面功能
最新发布
weixin_57399180的博客
11-03 1783
vue3+element Plus实现弹框的拖拽、可点击底层页面功能
vue 指令实现 el-dialog 模态框拖拽
@必意玲
04-26 3556
el-dialog v-draggable width = " 80% " @close = " resetFirst " :visible.sync = " dialogFormVisible " :close-on-click-modal = " false " > < div > 弹窗的内容。。。。
实现el-dialog的拖拽，全屏，缩小功能
05-24
要实现el-dialog的拖拽、全屏和缩小功能可以通过以下步骤： 1. 引入Element UI库和Vue.js库。 2. 在需要使用el-dialog的Vue组件中添加el-dialog标签，并设置相应的属性，如可拖拽属性“:draggable='true'”等。 3. 在el-dialog的标题栏中添加相应的按钮，用于实现全屏和缩小功能，例如： ```html <template slot="title"> <div class="dialog-title"> <span>Dialog Title</span> <div class="dialog-btns"> <i class="el-icon-full-screen" @click="fullScreen"></i> <i class="el-icon-minus" @click="minimize"></i> </div> </div> </template> ``` 4. 在Vue组件中添加相应的方法，用于实现全屏和缩小功能。例如： ```javascript methods: { fullScreen() { // 获取当前el-dialog的父元素 const parent = this.$el.parentNode; // 将父元素的类名改为fullscreen，实现全屏效果 parent.classList.add('fullscreen'); }, minimize() { // 获取当前el-dialog的父元素 const parent = this.$el.parentNode; // 将父元素的类名改为minimized，实现缩小效果 parent.classList.add('minimized'); } } ``` 5. 在CSS中添加相应的样式，用于实现全屏和缩小效果。例如： ```css /* 全屏效果 */ .fullscreen { width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; } /* 缩小效果 */ .minimized { width: 200px !important; height: 50px !important; left: calc(100% - 200px) !important; top: calc(100% - 50px) !important; } ``` 以上就是实现el-dialog的拖拽、全屏和缩小功能的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值