当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 简单实现一个ES5 Vue Dialog 插件

简单实现一个ES5 Vue Dialog 插件

2020年04月30日  | 移动技术网IT编程  | 我要评论

调用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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网