简单实现一个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

 

来源：oschina

链接：https://my.oschina.net/u/4330613/blog/4259017