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>