control层alert弹出框乱码_超强 Vue 对话框+模态框+Toast提示组件V-Dialogs

今天给小伙伴们分享一款超赞的Vue多形态弹出窗口组件VDialogs。

34bfe0cc4d34ec32d9118a482cb47ef9.png

v-dialogs 基于 vue.js 简洁易用的弹出对话框插件,包含了 模态窗口(Modal)、消息对话框(Alert)、遮罩(Mask)、弱提示框(Toast) 等功能。

a1834557616a8f29c63f4e718d304721.gif

安装

$ npm i -S v-dialogs

使用插件

// 在main.js中引入import Vue from 'vue'import vDialogs from 'v-dialogs'Vue.use(vDialogs, { global config options... })

Modal 模态窗口

import myComponent from './myComponent.vue'export default {  methods: {    open(){      this.$dlg.modal(myComponent, {        width: 350,        height: 450,        params: {          name: 'Terry Zeng'        },        // modal dialog close callback        // data: inner component call 'this.$emit.('close', data)'        callback: data=>{          this.$dlg.alert(`You selected ${data.companyName} company`)        }      })    }  }}
28b271ce3b3b5c6286f4b123cd64e6ce.png

Modal - 模态窗口

Alert 弹出消息对话框

包含 info, warning, error, success, confirm 等类型。

// Alertthis.$dlg.alert(message, [callback], [options])this.$dlg.alert('Data saved successfully!')// show message with close callbackthis.$dlg.alert('Data saved successfully!', function(){  ...})// show message with optionsthis.$dlg.alert('Data saved successfully!', {  messageType: 'success',  language: 'en'})// show message with close callback and optionsthis.$dlg.alert('Data saved successfully!', function(){  ...}, {  messageType: 'success',  language: 'en'})// confirm type alert dialog have cancel buttonthis.$dlg.alert('Do you really want to leave?', {  messageType: 'confirm',  cancelCallback: function(){    ...  }})
762b400d7584e2474e28310b77441002.png

Alert - 消息通知窗口

Mask 全屏遮罩层

// Maskthis.$dlg.modal(message, [callback], [options])this.$dlg.mask('form data saving', function(){  ...})
6f991eecc4e49e0c74b11cc7969f35b6.png

Mask - 全屏遮罩框

Toast 边角提示框

包含 4 种消息类型和 6 个角落位置。

// Toastthis.$dlg.toast(message, [callback], [options])this.$dlg.toast('you got a new message!')// show message with close callbackthis.$dlg.toast('you got a new message!', function(){  ...})// show message with optionsthis.$dlg.toast('you got a new message!', {  messageType: 'success',  closeTime: 3})// show message with close callback and optionsthis.$dlg.toast('you got a new message!', function(){  ...}, {  messageType: 'warning',  closeTime: 3})
da8aa7257c68055121c408610288ba32.png

Toast - 边角提示框

d07f93b64d7a24cc7890a1ae79b6ef21.png

Message type: warning

# 文档地址https://terryz.gitee.io/vue/#/dialog# 仓库地址https://github.com/terryz/v-dialogs

ok,就介绍到这里。如果大家在项目开发中用的上的话,不妨去看看哈。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值