簡單實現一個ES5 Vue Dialog 插件

調用vant的Dialog組件覺得用起來很爽，於是乎想自己也實現一個~

由於考慮到項目兼容性，所以沒用ES6寫法

（一）效果圖如下：

（二）可配置參數：圖標，內容，是否自動消失，是否顯示底部按鈕區域，還有按鈕回調函數

（三）組件代碼

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">取消</div>\
                <div @click="handleSure">確定</div>\
              </div>\
            </div>\
            <div class="my-mask"></div>\
        </div>\
    </transition>',

  data: function () {
    return {
      isShowFlag: false,   //是否顯示對話框
      icon: '',            //圖標
      desc: '',            //說明文字
      cancelShow: false,   //是否顯示取消按鈕
      autoDisappear: true //是否自動消失
    }
  },

  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;
    }
  }
});

　　（四）插件代碼

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();
  };
};

　　（五）使用代碼

 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");
      }
});

　

　　（六）完整代碼請看：https://github.com/nocpp/pconfirm.git