vue comfirm 弹框组件

  static Comfirm (option, callback) {
    option = option || {};
    let MyModal = Vue.extend({});
    this.confirm = new MyModal({
      data: {
        show: false,
        title: option.title ? option.title : '温馨提示',
        message: option.message ? option.message : '操作不正确',
        deep: option.deep ? option.deep : 0,
        time: option.time ? option.time : 2000,
        canceMessage: option.canceMessage ? option.canceMessage : '取消',
        sureMessage: option.sureMessage ? option.sureMessage : '确定'
      },
      template: ' <div class="comfirm">\n' +
      '        <transition name="fadeAlert">\n' +
      '            <div class="content" v-if="show">\n' +
      '                <p class="title">{{title}}</p>\n' +
      '                <p class="infor-text border-1px">\n' +
      '                    {{message}}\n' +
      '                </p>\n' +
      '                <p class="ok" >\n' +
      '                    <span class="confirm-cance" @click="cance">{{canceMessage}}</span>\n' +
      '                    <span  @click="shutModal"> {{sureMessage}}</span>\n' +
      '                </p>\n' +
      '            </div>\n' +
      '        </transition>\n' +
      '    </div>',
      mounted () {
        setTimeout(() => {
          this.show = true
        }, 20)
      },
      methods: {
        shutModal () {
          if (typeof callback === 'function') {
            callback();
          }
          this.show = false
        },
        cance () {
          this.show = false
        }
      },
      watch: {
        'show': function (val) {
          if (val === false) {
            this.$destroy()
            document.getElementById('app').removeChild(this.$el)
          }
        }
      }
    })
    // 或者，在文档之外渲染并且随后挂载
    let component = this.confirm.$mount();
    document.getElementById('app').appendChild(component.$el)

  }