vc 对话框 透明蒙版
虚拟对话 (v-dialogs)
A simple and powerful dialog, dialog type including Modal, Alert, Mask and Toast, based on Vue2.x
一个简单而强大的对话框,对话框类型包括基于Vue2.x的Modal,Alert,Mask和Toast。
安装 (Install)
# install dependencies
npm i v-dialogs --save
Include plugin in your main.js
file.
在main.js
文件中包含插件。
import Vue from 'vue'
import vDialog from 'v-dialogs';
...
Vue.use(vDialog);
用例 (Use case)
模态 (Modal)
import myComponent from './myComponent';//import component you want to open in Modal dialog
new Vue({
el: '#app',
methods: {
click(){
//open component in Modal, and passing params to component
this.$vDialog.modal(myComponent, {
params: {
a: 1,
b: 2
}
});
}
}
});
receive params in component
接收组件中的参数
export default {
name: 'myComponent',
props: ['params']
data(){
console.log(this.params);//{a:1, b:2}
return {};
}
}
close dialog and return data in component
关闭对话框并返回组件中的数据
export default {
name: 'myComponent',
props: ['params']
data(){
console.log(this.params);//{a:1, b:2}
return {};
},
methods: {
closeDialog(){
let data = {
a: 2,
b: 4
};
//close current Modal dialog and return data to caller
this.$vDialog.close(data);
}
}
}
警报 (Alert)
//call a message alert dialog
this.$vDialog.alert('This is a <b>Vue</b> dialog plugin: vDialog!');
//call a message alert dialog with dialog close callback
this.$vDialog.alert('This is a <b>Vue</b> dialog plugin: vDialog!',function(){
//your callback code
});
//call a custom type message alert dialog with dialog close callback
this.$vDialog.alert('This is a <b>Vue</b> dialog plugin: vDialog!',function(){
//your callback code
},{
messageType: 'error',
closeTime: 2,// auto close alert dialog in 2 second,
language: 'en'// i18n support 'cn', 'en', 'jp'
});
面具 (Mask)
//open a full screen mask
this.$vDialog.mask();
//use custom message
this.$vDialog.mask('my data loading...');
//use mask with callback
this.$vDialog.mask('my data loading...', function(){
// do something when mask close
});
some time, you can use mask like this:
一段时间后,您可以像这样使用遮罩:
let that = this;
let dialogKey = this.$vDialog.mask();
// do some http request
axios.post(...).then(resp){
// do your business
that.$vDialog.close(null, dialogKey);
};
吐司 (Toast)
open a Toast dialog in a corner
在角落打开Toast对话框
//open a Toast dialog with message, default show to right bottom position
this.$vDialog.toast('This is a Vue <b>vDialog</b> Toast!');
//open a Toast dialog with a close callback
this.$vDialog.toast('This is a Vue <b>vDialog</b> Toast!', function(){
// do something...
});
//open a Toast with some options
this.$vDialog.toast('This is a Vue <b>vDialog</b> Toast!',null, {
messageType: 'warning',//theme set
position: 'topLeft',// show position
dialogCloseButton: false, // show dialog without close button
closeTime: 3 // auto close toast times(second)
});
messageType:
messageType:
'info'(default)
'信息'(默认)
'warning'
'警告'
'error'
'错误'
'success'
'成功'
position:
位置:
'topLeft'
'左上方'
'topCenter'
“ topCenter”
'topRight'
'右上'
'bottomLeft'
'左下方'
'bottomCenter'
'bottomCenter'
'bottomRight'
“ bottomRight”
翻译自: https://vuejsexamples.com/a-simple-and-powerful-dialog-including-modal-alert-mask-and-toast/
vc 对话框 透明蒙版