vue comfirm 弹框组件
static Comfirm (option, callback) {option = option || {};let MyModal = Vue.extend({});this.confirm = new MyModal({data: {show: false,title: option.title ? opt...
·
static Comfirm (option, callback) {
option = option || {};
let MyModal = Vue.extend({});
this.confirm = new MyModal({
data: {
show: false,
title: option.title ? option.title : '温馨提示',
message: option.message ? option.message : '操作不正确',
deep: option.deep ? option.deep : 0,
time: option.time ? option.time : 2000,
canceMessage: option.canceMessage ? option.canceMessage : '取消',
sureMessage: option.sureMessage ? option.sureMessage : '确定'
},
template: ' <div class="comfirm">\n' +
' <transition name="fadeAlert">\n' +
' <div class="content" v-if="show">\n' +
' <p class="title">{{title}}</p>\n' +
' <p class="infor-text border-1px">\n' +
' {{message}}\n' +
' </p>\n' +
' <p class="ok" >\n' +
' <span class="confirm-cance" @click="cance">{{canceMessage}}</span>\n' +
' <span @click="shutModal"> {{sureMessage}}</span>\n' +
' </p>\n' +
' </div>\n' +
' </transition>\n' +
' </div>',
mounted () {
setTimeout(() => {
this.show = true
}, 20)
},
methods: {
shutModal () {
if (typeof callback === 'function') {
callback();
}
this.show = false
},
cance () {
this.show = false
}
},
watch: {
'show': function (val) {
if (val === false) {
this.$destroy()
document.getElementById('app').removeChild(this.$el)
}
}
}
})
// 或者,在文档之外渲染并且随后挂载
let component = this.confirm.$mount();
document.getElementById('app').appendChild(component.$el)
}
更多推荐
已为社区贡献6条内容
所有评论(0)