呼叫vant的Dialog組件覺得用起來很爽，于是乎想自己也實作一個~
由于考慮到專案兼容性，所以沒用ES6寫法
（一）效果圖如下：
（二）可配置引數：圖示，內容，是否自動消失，是否顯示底部按鈕區域，還有按鈕回呼函式
（三）組件代碼
var pconfirm = Vue.extend({
template: '\
<transition name="fade">\
<div v-show="isShowFlag">\
<div >\
<div >\
<div >\
<img :src="https://www.cnblogs.com/qiuxd/p/icon" alt="">\
</div>\
<div >\
{{desc}}\
</div>\
</div>\
<div v-show="!autoDisappear">\
<div v-show="cancelShow" @click="handleCancel">取消</div>\
<div @click="handleSure">確定</div>\
</div>\
</div>\
<div ></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 = https://www.cnblogs.com/qiuxd/p/{}, 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/102398.html
標籤：JavaScript