vue3 el-dialog 拖拽+缩放 --遇到坑

已于 2024-01-03 16:02:30 修改
阅读量572 收藏 9
点赞数 11
文章标签： vue.js
于 2024-01-03 15:54:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51553392/article/details/135365976
版权

自定义属性：
注意点：

  1. 不能直接写在 el-dialog标签上 <el-dialog v-drag />
  2. 不能写 bind() => 转化成 mounted()
小七想发言
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【vue3】使用自定义指令，实现el-dialog的拖拽功能。
梅花寺
09-19 1143
因为要自己操作dom（设置事件），所以感觉还是使用自定义指令更直接一些，而且对原生组件的影响更小。const _dialogDrag = {// mounted mounted (el: any, binding: any) {// 监听 dialog 是否显示的状态watch (binding.value, () => {// dialog 不可见，退出if (!
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
10-15
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
利用 vue3 给 element-plus 的 el-dialog 增加拖拽功能
zgbhn的博客
10-14 2217
前言 代码来自使用 vue3 的自定义指令给 element-plus 的 el-dialog 增加拖拽功能，用的时候发现一些问题，我进行了二次修改。 变化 限制边缘 全屏效果 限制在弹窗的 header 拖动 增加用户体验???? 效果 代码 const bus = require("vue3-eventbus") const dialogDrag = (app) => { app.directive('dialogdrag', { // 渲染完毕 mounted(el) {
element-ui中el-dialog放大缩小，弹出框移动，取消阴影
最新发布
weixin_47050857的博客
04-04 850
element-ui中el-dialog放大缩小，弹出框移动，取消阴影 可以点击下层
记一下vue3中使用element-plus的弹框dialog组件实现拖拽效果
weixin_57011137的博客
11-04 2154
使用hook封装拖拽方法 let draging = false; let dragDom: HTMLElement | null; let dragpoint: { x: number, y: number }; function handleMouseUp() { draging = false; dragDom = null; } function handleMousemove(ev: MouseEvent) { if (draging) { let _dr
vue3项目中引入dialog插件，支持最大最小化、还原、拖拽
SunFlower914的博客
08-08 2005
上图是layui-vue组件库中的layer插件，我的项目使用的是element-plus组件库，在用不上layui组件库的情况下，就单独引入。2.在需要展示弹层的位置引入弹层组件或函数（layer弹层支持以函数/标签的形式使用）1.按照npm地址的Readme操作，在mainjs中引入插件并全局注册。具体的API见上方layui-vue组件库地址。这个弹层插件就可以了。
Vue：el-dialog在浏览器范围内可拖拽，可放大缩小，
wen_rou11的博客
07-12 1963
Vue：el-dialog在浏览器范围内可拖拽，可放大缩小，
vue element 使用el-dialog实现放大 缩小功能
a83370892的博客
04-29 8052
环境： vue:2.5.16 element-ui:2.3.4 效果图： 缩小后的样子： 放大后的样子 问题： el-dialog本身只支持标题栏右上角有关闭按钮，故需要使用slot="title" 重写覆盖原本的标题栏。 除了这个查询了下官方API文档，其他都是简单的逻辑代码而已。 组件代码： <template> <div class="big-and-small-view"> <el-dialog class="D.
element ui dialog可拉伸放大缩小和拖动
李程程的博客
09-05 8051
鼠标放到对话框头部可拖动对话框、双击头部可放大、放两侧可以拖动宽度、放下边可拖动高度、右下角高度宽度可以同时缩放。
vue的el-dialog弹窗放大缩小
m0_70722541的博客
04-27 4174
3.在el-dialog弹窗里放一个图标，点击缩放图标进行放大缩小的切换。用el-dialog属性fullscreen实现弹窗的放大缩小。2.el-dialog标签上加上fullscreen属性。1.模板部分（template）2.js部分（script）
拖拽放大缩小el-dialog
qq_16785561的博客
12-01 375
新建untils，dialogDragZoom.js文件。基于el-dialog的拖拽、放大缩小，效果如下。main.js中引用。
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
vue3+webpack+vue-router路由+axios
05-21
vue3+webpack+vue-router路由+axios，资源包含了vue3+webpack+vue-router路由+axios的相关代码，并且对vue-router路由进行了封装，也对axios进行了封装，资源代码需要先：npm install 安装下依赖组件之后就可以启动...
封装element Dialog实现全屏、最小、双击回复原状和拖拽功能
Queen-Shir的博客
07-28 2206
https://www.jianshu.com/p/fa36f0ed9222
Vue3 ElementPlus Dialog封装 （一：使用props emit）
LeoForBest的博客
06-08 2086
多个页面中需要录入用户数据（弹窗内容相同），重复写弹窗代码比较繁琐。emit触发由弹框点击了确认或者关闭按钮适合调用。参考VUE官方两个例子，基本父子件通信如下。因此组件中需要定义两个prop和emit。本例中模型较简单，记录下使用方法和原理。
vue3 | 弹窗Dialog组件封装
ydongabc
04-27 3868
只暴露提供一个入口函数—show()，保持组件内部封闭性。数据交互尽量通过 show 方法来传递，减少外部状态依赖。固定的配置项参数才考虑用 props。
element el-dialog弹窗拖动
07-29
element el-dialog弹窗可以通过添加指令v-dialogDrag来实现拖动功能。在使用el-dialog标签时，可以添加v-dialogDrag指令，这样当鼠标触摸对话框顶部时就会出现拖动的鼠标样式，按住鼠标就可以拖动对话框到窗口任意位置了。例如，在el-dialog标签中添加v-dialogDrag指令的示例代码如下： ```html <el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="500px" title="请选择" :close-on-click-modal="false" v-dialogDrag> </el-dialog> ``` 这样就可以实现element el-dialog弹窗的拖动功能了。 #### 引用[.reference_title] - *1* *3* [Vue中使用element-ui el-dialog弹窗最大化还原，拖拽，动态改变大小](https://blog.csdn.net/yf18040578780/article/details/128493811)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue el-dialog 弹窗实现拖拽效果](https://blog.csdn.net/weixin_43316300/article/details/110383831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小七想发言

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值