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

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

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

安装

$ 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`)        }      })    }  }}

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(){    ...  }})

Alert - 消息通知窗口

Mask 全屏遮罩层

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

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})

Toast - 边角提示框

Message type: warning

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

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