简单实现一个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
掌控自己,掌控命运