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

VIP文章 已于 2022-01-21 18:06:40 修改
阅读量816 收藏
点赞数
分类专栏： 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.0弹窗组件

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

特点
  • 可以进行拖动，并且可以选择拖动哪个元素来拖动整个弹窗
  • 可以最大化、最小化
  • 最小化可以在选择要在当前位置最小化或者最小化至左下角，多个弹窗最小化至左下角时，则将会水平排列，当超出一行的水平排列时，则会向上一行进行排列
  • 上下左右左上右下正中等八方位以及正中央全方位初始化时定位。
  • 且能根据定位在进行二次偏移定位，例如你定位于左上，也可以对左上再偏移你需要的像素点
  • 多种动画供选择，动画可进行关闭、或者设置动画时长，以及出场离场动画可分开进行设置
  • …
效果图
  • 嵌入表格
最低0.47元/天 解锁文章
一介码农　⁡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
可拖动、最小化、最大化的弹出窗口
05-29
可拖动、最小化、最大化的弹出窗口! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
万能Dialog
02-13
附博客地址：http://blog.csdn.net/z240336124/article/details/50658685
vuejs-dialog：轻量级，基于承诺的警报，提示和确认对话框
02-06
Vuejs对话框插件 轻量级，基于承诺的警报，提示和确认对话框。 演示版 v1.xx版中的重要更新 对话框将始终使用对象来解析。 （即，继续进行的回调将始终收到一个对象） 对于指令用法，上面（1）中返回的对象将包含一个节点。 节点是指令绑定到的元素（请参阅问题 由于样式已被提取到单独的文件中，因此必须明确包含样式（请参阅问题 ） 如果全局启用了加载程序，并且通过没有回调的指令触发了对话框，则在单击“继续”时将忽略加载程序 父节点上的自定义类注入（请参阅问题 ） 能够注册自定义视图。 这允许自定义逻辑，自定义按钮等（请参阅问题 ， ， ） 用于通过HTML脚本标签安装 该库已分为两
类dialog的弹窗插件
wxc_niuniu的博客
08-24 684
前端开发过程中，弹窗的使用越来越广泛，使用性越来越强，使用过dialog插件之后，萌生了自己编写一个类dialog的弹窗插件，同时，也是第一次编写插件，写得不好，麻烦各位看官指出交流！ 这个插件在开始时，是使用jQuery的 $.fn.optionName = function(){} 的方式编写；因为每次的弹窗都是动态生成的，但是在测试的是否，发现每次执行回调函数的时候，在除第一次执行，都会执行多
实战wxPython：021 - 对话框Dialog
seniorwizard的专栏
05-26 690
对话框是GUI应用中一个重要组成部分。在GUI应用中，对话框常用于输入修改数据，选择文件、字体、颜色，参数配置，消息显示等交互操作。 wx.Dialog类是所有对话框窗口类的的基类，一个对话框应用类一般都从wx.Dialog类或者其子类派生(wx.PrintDialog例外，它调用系统原生对话框)。wx.Dialog常用来完成一个交互任务或者作为应用的顶层窗口使用。
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..
html开源类库,Js弹窗类库的开源库介绍
weixin_31758889的博客
06-08 485
又有好久没更新过博文了，一来最近一直在开发一套商业性网站，没什么精力来更新，二来这个网速确实有点乌龟。好了，废话不说了；直接入正题。玩过QQ空间的人都知道，在进行一些操作后，页面会出现一个漂亮的类似alert的tips提示，如图：看着非常舒服，有时候需要更改某张设置的时候，前面的图片也会变成一个蓝色的感叹号，有时候操作失败或者网络延迟，前面的图片又会变成一个红色的叉叉，提示是不是很人性化呢？再来看...
js原生popup_最小巧的移动端弹窗组件，toast、alert、confirm，使用原生js
weixin_39639622的博客
12-24 1061
popup最小巧的移动端弹窗组件，toast、alert、confirm，使用原生js，不依赖任何类库，不需要引入任何css文件，只有一个js文件组件设计为单例模式，在一个打开状态，再次打开另一个，会自动关闭上一个1. toastlet toast = new ToastClass();方法方法名说明show打开方法hide关闭方法onShow打开时回调(全局)onHide关闭时回调(全局)toa...
PPSLick.js-个人/初始团队的网站基础弹窗组件库，快速创建登录、注册、搜索、联系我和订阅等弹窗组件，无需写html+css
Huoyo
08-10 288
个人/初始团队的网站基础弹窗组件库，快速创建登录、注册、搜索、联系我和订阅等弹窗组件，无需写html+css
收藏三款好看的信息弹出框
sunshijiazu的博客
06-08 4250
个人收藏系列
elementui中el-dialog弹窗移动缩放大小（保留上次位置大小）
weixin_43123984的博客
02-10 5160
效果演示 一、创建一个dialog.js文件，并在main.js中进行引入 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag', { bind (el, binding, vnode, oldVnode) { // 自定义属性，判断是否可拖拽 if (!binding.value) return const dialogHeaderEl = el.querySelector('.el-
html5 窗口 最小化,普通Dom转换为可拖拽、最大化、最小化窗口js插件
weixin_28707739的博客
05-30 276
这是一款可以将任何HTML元素转换为可平移、拖拽、最大化、最小化窗口的js插件。你可以使用插件全部功能，或者只使用某个子功能，入单独使用最小化功能。使用方法在页面中引入下面的文件。初始化插件interactive(Element, Options);Element：需要进行转换的HTML元素。Options：配置参数。配置参数drag：是否可以进行拖拽，默认为true。resize：是否可以改变元...
Electron 自定义最小化、最大化、关闭、可拖拽
weixin_47996469的博客
05-27 2796
background.js 中 引入 ipcMain 在createWindow中 BrowserWindow下方新增 最小化 ,最大化,关闭事件 //引入ipcMain import { app, protocol, BrowserWindow, ipcMain } from 'electron' ipcMain.on('min', e => win.minimize()); ipcMain.on('max', e => win.maximize()); ipc...
Dialog源码分析
Jack的博客
01-15 612
1, 概述 Dialog(对话框)不仅可以显示信息,还可以和Activity界面进行交互,这种交互是阻塞式的. 继承Dialog的类有好几种,主要以AlertDialog为例来分析一下具体的原理。 2 实现 Dialog依附于Activity来实现,一般在acitivty中显示,因为Dialog的交互是阻塞式的,所以最好另开一线程, 1,首先调用showDialog方法 showDialo
D-Bus学习（九）：利用XML定义D-Bus之Singal收发例子
愷风（Wei）的专栏
04-28 3770
　　在前面我们学习了使用Glib的高程捆绑方式的method的收发，现在学习singal的收发，xml例子如下                                      　　在前面我们已经学习了方法Test的处理，现在增加一个信号Hello，为了是的处理方式更为简洁，
VUE宝典之vue-dialog使用
Kuangtian的博客
12-09 1675
Vue Dialog 是一个基于 Vue.js 的对话框插件，它让开发者可以在 Vue 项目中轻松地使用对话框。这个插件是在 Element UI 的基础上进行二次封装的，相比 Element UI，Vue Dialog 更加简洁、易于使用。
一款vue弹框可设置最大化最小化，多选的插件库
m0_64573712的博客
06-26 1676
vue-pubilc-layer设置弹框最大化最小化移动
VUE使用element Ui dialog组件实现最大最小化，拖拽功能
最新发布
wenbow_0619的博客
01-11 1080
最大化最小化在顶部导航栏使用按钮实现，提前下载icon图标。
Vue3 如何实现一个带遮罩的 dialog 对话框
fang_my的博客
02-14 2231
目前的代码只是一个很粗糙的实现，更加具体实用的功能还需读者根据自己项目的需求自行完成。下面是文件的代码。读者可根据需要自行查阅。import {} //dialog 消失的方法 }
vue多个div宽度可拖拽
12-20
Vue是一种流行的JavaScript框架，可以用来构建用户界面。在Vue中，可以使用一些第三方库来实现多个div宽度可拖拽的效果。 其中，vue-draggable-resizable是一个常用的库，它能够让用户通过拖拽鼠标来改变div的大小。首先，我们需要在Vue项目中安装vue-draggable-resizable库，并且在需要使用该功能的组件中引入。 接着，我们可以在组件的HTML模板中，使用vue-draggable-resizable的指令来实现可拖拽的效果。通过指定div的resizable属性为true，就可以让该div具有可拖拽的功能。另外，我们也可以通过设置最小和最大宽度的属性，来限制div的大小范围。 在实际应用中，可以将这种可拖拽的div用于布局设计，让用户可以根据自己的需求来自由调整界面的大小和位置。这种交互式的设计能够提升用户体验，让用户更加方便地使用网站或应用程序。 总之，Vue中使用vue-draggable-resizable库可以轻松实现多个div宽度可拖拽的效果，带来更加灵活和个性化的用户界面体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值