use Vue.extend (require (". / message.vue")); to import a message component into body. For some reason, only the template in the empty div,message.vue of el has been imported. What"s the problem?
src/components/toast/index.js
import Vue from "vue";
let MyMsgConstructor = Vue.extend(require("./message.vue"));
let instance;
let message = function (msg) {
instance = new MyMsgConstructor({
el: document.createElement("div"),
data: {
message: msg,
visible: true
}
});
document.body.appendChild(instance.$el);
return instance;
};
export default message;
src/components/toast/message.vue
<template>
<transition name="el-message-fade">
<div v-show="visible" class="my-msg">{{message}}</div>
</transition>
</template>
<script>
export default {
data() {
return {
message: "",
visible: true
}
},
methods: {
close() {
setTimeout(() => {
this.visible = false;
}, 2000)
},
},
mounted() {
this.close();
}
}
</script>
main.js
import message from "./components/toast/index.js"
Vue.$message = Vue.prototype.$message = message;
use
openToast() {
this.$message("test");
}