《wangDialog》一个强大的vue弹窗组件

已于 2022-01-21 18:06:40 修改
阅读量901 收藏
点赞数
分类专栏： vue 个人开源项目 文章标签： vue.js 前端 javascript
于 2022-01-15 01:01:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwq997/article/details/122474336
版权
wangDialog是一个专为Vue3设计的弹窗组件，旨在提供强大的功能，包括拖动、最大化、最小化等。组件的设计灵感来源于layer，但针对特定需求进行了优化。目前仍在开发中，未来将开源并改进样式。
摘要由CSDN通过智能技术生成

《wangDialog》一个强大的vue3.0弹窗组件

用了iview、elment-puls、scui等的dialog组件，觉得都不够强大，很多我需要的功能都没有，之前写jquery时经常使用layui的layer弹窗，layer弹窗的功能极为强大，但对于某些复杂情况的实现也并不够完美，都不是我心里完美的弹窗组件，且layui并不适合在vue项目中去使用，因此，我打算不知死活的去实现一个最适合我的弹窗组件。
当前还有不少功能还在继续完善，后续完善了再开源出来，目前版本样式是抄element-plus的，后续会进行修改。

特点
  • 可以进行拖动，并且可以选择拖动哪个元素来拖动整个弹窗
  • 可以最大化、最小化
  • 最小化可以在选择要在当前位置最小化或者最小化至左下角，多个弹窗最小化至左下角时，则将会水平排列，当超出一行的水平排列时，则会向上一行进行排列
  • 上下左右左上右下正中等八方位以及正中央全方位初始化时定位。
  • 且能根据定位在进行二次偏移定位，例如你定位于左上，也可以对左上再偏移你需要的像素点
  • 多种动画供选择，动画可进行关闭、或者设置动画时长，以及出场离场动画可分开进行设置
  • …
效果图
  • 嵌入表格在这里插入图片描述
  • 最小化至左下角时水平排列
最低0.47元/天 解锁文章
一介码农　⁡
关注
专栏目录
模态框--Dialog
WangKeSiInSiChuan的博客
10-21 326
在BJUI前端框架中，可以通过input、button等标签来设置Dialog的跳转链接，通过该链接可以在当前页面生成一个类似于模态框的弹窗。在该弹窗中可以有具体功能，相当于该页面下的子页面。该项功能，对于在当前页面中，需要产生一个子页面来完成相应的功能时具有一定作用。dialog的设置可以再本页面写dialog的页面代码，也可以新建一个html文件作为dialog的页面。为保持页面代码的简洁性...
开源插件基于Vue3轻量级弹出框推荐SlashLayer
这是一条不归路
06-17 868
SlashLayer是一个基于Vue3开发的专注于解决业务后台管理系统复杂弹出框和表单问题的轻量级弹出层插件，致力于使用最少的代码完成更多的功能，将更多的时间用于摸鱼事业。提供常见的新增、更新等表单弹出层容器，图片预览、展示框容器、确认框等常用的基础功能，基于MIT协议，无任何使用限制。 ![image.png](https://img-blog.csdnimg.cn/img_convert/9e18fd006564d74c8e8b78c54189fa58.png#clientId=u000ee8c7-46
VUE宝典之vue-dialog使用
Kuangtian的博客
12-09 3167
Vue Dialog 是一个基于 Vue.js 的对话框插件，它让开发者可以在 Vue 项目中轻松地使用对话框。这个插件是在 Element UI 的基础上进行二次封装的，相比 Element UI，Vue Dialog 更加简洁、易于使用。
实战wxPython：021 - 对话框Dialog
seniorwizard的专栏
05-26 972
对话框是GUI应用中一个重要组成部分。在GUI应用中，对话框常用于输入修改数据，选择文件、字体、颜色，参数配置，消息显示等交互操作。 wx.Dialog类是所有对话框窗口类的的基类，一个对话框应用类一般都从wx.Dialog类或者其子类派生(wx.PrintDialog例外，它调用系统原生对话框)。wx.Dialog常用来完成一个交互任务或者作为应用的顶层窗口使用。
一款vue弹框可设置最大化最小化，多选的插件库
m0_64573712的博客
06-26 1797
vue-pubilc-layer设置弹框最大化最小化移动
万能Dialog
02-13
"万能Dialog"是一个在Android开发中用于创建高度自定义和功能丰富的对话框的工具类。这个工具包可能包含了各种对话框样式，旨在模仿iOS系统的...这个工具类的灵活性和可扩展性使其成为Android开发中的一个实用组件。
支持最大化、最小化、还原及弹窗主体内容自适应的vue-vuecmf-dialog弹窗组件
emei8的专栏
04-19 2088
支持最大化、最小化、还原及弹窗主体内容自适应的弹窗组件
VUE使用element Ui dialog组件实现最大最小化，拖拽功能
最新发布
wenbow_0619的博客
01-11 2327
最大化最小化在顶部导航栏使用按钮实现，提前下载icon图标。
可拖动、最小化、最大化的弹出窗口
05-29
可拖动、最小化、最大化的弹出窗口! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
Vue实现弹窗 拖动、放大、缩小
qq_40407998的博客
08-04 8769
实现：拖动，上下放大和左右放大，双击头部会实现全屏，因为普通的弹窗标签会在我们点击弹窗之外的部分的时候自动关闭，所以我们需要给弹窗部分增加一个属性 页面标签引用部分 <el-dialog title="弹窗" :visible.sync="dialogVisible" :close-on-click-modal=false v-dialogDrag width="75%" > //:close-on-click-modal=false 这个属性的作用是不让点击外面关闭弹窗 &lt
van-dialog 弹出框之组件调用小结 - Vue
热门推荐
survivorsfyh的博客
06-01 1万+
van-dialog弹出框之组件调用方法小结，结合一些 api 中提供的属性进行组合搭配后的效果。 html <button type="button" style="width: 100px; height: 30px;" @click="remarksPaperClick">备注</button> <van-dialog v-model="dialogShow" :show-cancel-button="true" :before-close="befor..
收藏三款好看的信息弹出框
sunshijiazu的博客
06-08 5619
个人收藏系列
html弹窗_新一代Web弹窗组件
weixin_39760389的博客
11-21 732
Layx 新一代Web弹窗组件。gzip压缩版仅 13.5kb，非常小巧。特性纯原生Javascript实现，不依赖任何第三方框架支持IE10+(含IE10)、Chrome、Firefox、Opera、Edge、Safari等主流浏览器支持多种窗口类型：文本窗口，页面窗口，窗口组，提示窗口，消息窗口，询问窗口，输入窗口，加载窗口、浮动窗口、置顶窗口、倒计时窗口、只读窗口支持窗口最大化、最小化、恢复...
实现el-dialog的拖拽，全屏，缩小功能
weixin_34122810的博客
05-09 2142
基于el-dialog， 封装了一下。，实在懒得写，所以直接把代码 粘出来了 大概粘了一下效果。自己体会把。 组件使用 <el-dialog v-dialogDrag ref="xhzqDialog" class="xhzqDialog" :title="title" :fullscreen="isf...
vue element 使用el-dialog实现放大 缩小功能
a83370892的博客
04-29 8346
环境： 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.
vue实现dialog弹框的可伸缩拖拽
weixin_37582804的博客
10-22 7048
1.el-dialog中添加 :close-on-click-modal="false"可以防止点击空白处弹框自动关闭 < el-dialog :title="‘设置分析条件’" v-if=“dialogFormVisible” v-dialogDrag :visible.sync=“dialogFormVisible” id=“face_dialog-user” :close-on-c...
VueDialog弹窗诟病轻松解决
梅花寺
01-18 1433
本质其实本次分享页并没有很多新意,这种引用式的封装,很多人也早都想到了,只不过感觉针对弹窗这块的封装,很多走了极端，要么就追求layer那种写法兼容习惯,要么干脆还是保留原样,只做一些特殊处理，属性还是原样保留了。至于回调,我之前虽然用过一段,但还是觉得不慎习惯，因为偶然有个共享弹窗存在确认后逻辑不同的问题给我造成了困扰,觉得写法有点儿变态,因此做了一些尝试和延展,觉得算是比较良性的一个调用方式吧。
vue element dialog 弹窗单独组件
小小爪哇工程师的博客
12-16 3095
大家想要单独弹窗组件，我猜测应该是对表单的提交，这里演示表单弹窗，本人后端开发，有不对的地方勿喷。这就完成了一个弹窗单独组件的实现，至于父子组件传参可自行百度$refs和prop。//这里是控制弹窗是否显示的，可以看下哪里引用到了。'上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1518 弄'//用于改变弹窗子组件是否显示的属性。
Vue 点击按钮显示弹窗的几种不同组件封装
huangpb的博客
12-12 7280
封装一：只把弹窗封装成一个单独的组件 1. 弹窗组件 my-dialog.vue <template> <el-dialog title="选择水果" :visible.sync="dialogVisible" width="30%" @close="handleClose" > <el-checkbox-group v-model="checkList"> <el-checkbox
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值