reference article https://molunerfinn.com/vue-c.
create three files Notice.vue index.js main.js
//Notice.vue
<template>
<div class="notice">
<div class="content">
{{ content }}
</div>
</div>
</template>
<script>
export default {
name: "notice",
data () {
return {
visible: false,
content: "",
duration: 3000
}
},
methods: {
setTimer() {
setTimeout(() => {
this.close() // 3000ms
}, this.duration)
},
close() {
this.visible = false
setTimeout(() => {
this.$destroy(true)
this.$el.parentNode.removeChild(this.$el) // DOM
}, 500)
}
},
mounted() {
this.setTimer() // 3000ms
}
}
</script>index.js//
import Vue from "vue"
const NoticeConstructor = Vue.extend(require("./preview.vue")) // VueVue.extend
let nId = 1
const Notice = (content) => {
let id = "notice-" + nIdPP
const NoticeInstance = new NoticeConstructor({
data: {
content: content
}
}) // contentNotice
NoticeInstance.id = id
NoticeInstance.vm = NoticeInstance.$mount() // domVue
NoticeInstance.vm.visible = true
NoticeInstance.dom = NoticeInstance.vm.$el
document.body.appendChild(NoticeInstance.dom) // dombody
NoticeInstance.dom.style.zIndex = nId + 1001 // Noticez-index
return NoticeInstance.vm
}
export default {
install: Vue => {
Vue.prototype.$notice = Notice // NoticeVueprototype
}
}main.js//
import Notice from "@/components/preview"
Vue.use(Notice)console reported an error, what should I do?
problem description
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)