不知道你是怎么做的,我是这么做的
1.首先你的那个innerHTML里面的东西我放在一个单独的.vue文件里;
2.然后在js文件里面import进来,通过Vue.extend和new创建一个实例;
3.在append后,在Vue.nextTick回调里完成isShow的改变
我的Alert和Comfirm组件部分代码:
Box.vue:
<template>
<transition name="fade">
<p class="ui-alert" v-if="visible">
<p class="ui-msg-box">
<p class="ui-title" v-text="title">提示</p>
<p class="ui-msg" v-text="message"></p>
<p class="ui-buttons">
<a class="btn" href="javascript:;" @click="onOk">确认</a>
<a v-if="isConfirm" class="btn" href="javascript:;" @click="onCancel">取消</a>
</p>
</p>
<p class="ui-mask"></p>
</p>
</transition>
</template>
<script type="text/javascript">
export default {
props: {
title: String,
message : String
},
data() {
return {
isConfirm:true,
visible: false,
onOk:null,
onCancel:null
};
},
methods: {
onOk() {
this.onOk && this.onOk();
},
onCancel() {
this.onCancel && this.onCancel();
}
}
}
</script>
Box.js:
import Vue from "vue";
const AlertVue = Vue.extend(require('./box.vue'));
let Message = (options = {}) => {
let title = options.title || "提示",
isConfirm = (options.isConfirm === undefined || options.isConfirm===false) ? false : true,
message = typeof options === 'string' ? options : options.message;
return new Promise((resolve, reject) => {
let ins = new AlertVue({
el : document.createElement("p")
});
ins.message = message;
ins.title = title;
ins.isConfirm=isConfirm;
ins.onOk = () => {
ins.visible = false;
resolve(true);
}
ins.onCancel = () => {
ins.visible = false;
resolve(false);
}
document.body.appendChild(ins.$el);
Vue.nextTick(() => {
ins.visible = true;
});
});
}
let alert = (options = {}) => {
let title = options.title || "提示";
let message = typeof options === 'string' ? options : options.message;
return new Message(Object.assign({
isConfirm:false
}, {
title,
message
}));
}
let confirm = (options = {}) => {
let title = options.title || "提示";
let message = typeof options === 'string' ? options : options.message;
return new Message(Object.assign({
isConfirm:true
}, {
title,
message
}));
}
export default alert;
export {confirm};
创建 DOM 元素之后再创建 Vue 实例,指定 el 包含生成的元素。