Calling the Dialog component of van t is very cool, so I want to implement one myself~

Because of project compatibility, ES6 is not used

(1) The renderings are as follows:

(2) Configurable parameters: icon, content, whether to disappear automatically, whether to display the bottom button area, and button callback function

(3) Component code

var pconfirm = Vue.extend({
  template: '\
    <transition name="fade">\
        <div v-show="isShowFlag">\
          <div class="com-comfirm">\
              <div class="com-comfirm-content">\
                <div class="com-comfirm-icon-wrap">\
                  <img :src="icon" alt="">\
                </div>\
                <div class="com-comfirm-desc">\
                  {{desc}}\
                </div>\
              </div>\
              <div class="com-comfirm-foot" v-show="!autoDisappear">\
                <div class="com-comfirm-cancel" v-show="cancelShow" @click="handleCancel">cancel</div>\
                <div @click="handleSure">Determine</div>\
              </div>\
            </div>\
            <div class="my-mask"></div>\
        </div>\
    </transition>',

  data: function () {
    return {
      isShowFlag: false,   //Show dialog box or not
      icon: '',            //Icon
      desc: '',            //Explanatory text
      cancelShow: false,   //Show cancel button or not
      autoDisappear: true //Whether to disappear automatically
    }
  },

  methods: {
    initData: function (_data, _methods) {
        var that = this;

        this.isShowFlag = false;
        this.icon = '';
        this.desc = '';
        this.cancelShow = false;
        this.autoDisappear = true;

        Object.assign(this.$data, _data);
        Object.assign(this, _methods);

        if (this.autoDisappear) {
          setTimeout(function () {
            that.hide();
          }, 2000);
        }
    },

    handleSure: function () {
      this.sure && this.sure();
      this.hide();
    },

    handleCancel: function () {
      this.cancel && this.cancel();
      this.hide();
    },

    show: function () {
      this.isShowFlag = true;
    },

    hide: function () {
      this.isShowFlag = false;
    }
  }
});

(IV) plug in code

var Pconfirm = {};
Pconfirm.install = function (Vue, options) {
  var confirmObj;

  var initInstance = function () {
      confirmObj = new pconfirm();
      var component = confirmObj.$mount();
      document.getElementById('app').appendChild(component.$el);
  };

  this.show = function (_option) {
    if (!confirmObj) {
      initInstance();
    }

    var data = {}, methods = {};
    for (var key in _option) {
      if (typeof _option[key] === 'function') {
        methods[key] = _option[key];
      } else {
        data[key] = _option[key];
      }
    }

    confirmObj.initData(data, methods);

    confirmObj.show();
  };
};

(V) use code

 Vue.use(Pconfirm);
 Pconfirm.show({
      icon: "./img/qt6.png",
      desc: "OK"
 });
 Pconfirm.show({
     icon: "./img/qt5.png",
     desc: "Error, Try Again",
     cancelShow: true,
     autoDisappear: false,
     sure: function() {
           console.log("You clicked ok");
     },
      cancel: function() {
           console.log("You clicked Error");
      }
});

(VI) for the complete code, see: https://github.com/nocpp/pconfirm.git