vue-j-dialog
Dialog (Modal) component for Vue2.x
npm
$ npm install vue-j-dialog
Options
| Option | Purpose |
|---|---|
| context | {DOM} 挂靠元素，默认为body |
| type | {String} 只有一个值"tip",为提示信息 |
| timeout | {Number} 当type="tip"时，提示信息显示时间（单位：毫秒) |
| title | {String} 标题 |
| content | {String} 内容 |
| width | {String} 宽，例如："100%","10em" |
| height | {String} 高 |
| className | {String} css类名 |
| showHeader | {Boolean} 显示头部 |
| showFooter | {Boolean} 显示脚部 |
| showCloseButton | {Boolean} 显示关闭按钮 |
| showCancelButton | {Boolean} 显示取消按钮 |
| showOkButton | {Boolean} 显示确认按钮 |
| cancelText | {String} 取消按钮文字 |
| okText | {String} 确认按钮文字 |
| enableCoverClick | {Boolean} 遮罩层是否能点击 |
Events
| Option | Purpose |
|---|---|
| open | 打开dialog时的回调，回调参数为该组件对象 |
| close | 离开dialog时的回调，回调参数为该组件对象 |
| ok | 点击确定按钮时的回调，回调参数为该组件对象 |
Example
main.js
import Vue from "vue";
import Dialog from "vue-j-dialog";
Vue.use(Dialog);page.vue
<template>
<button @click="btnClick">打开弹窗（模板方式）</button>
<button @click="btnClick2">打开弹窗（函数方式）</button>
<show-dialog v-model="isShow" @close="onClose" @open="onOpen" @ok="onOk">
<p>弹窗内容</p>
</show-dialog>
</template>
<script>
import ShowDialog from "vue-j-dialog/index.vue"; //用于模板方式
export default {
data () {
return {
isShow:false
}
},
methods:{
onOpen($this){
console.log("打开回调",$this);
},
onClose($this){
consle.log("关闭回调",$this);
},
onOk($this){
console.log("确认回调",$this);
},
btnClick(){
this.isShow=true;
},
btnClick2(){
this.$dialog({
title:"说明",
content:"这是函数打开"
})
.$on("close",this.onClose)
.$on("open",this.onOpen)
.$on("ok",this.onOk);
}
}
}
</script>