十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇内容介绍了“怎么用Vue封装全局toast组件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
成都创新互联是一家专业从事成都做网站、网站建设、外贸营销网站建设、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,成都创新互联依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务!
// components/Toast {{message}}
import Vue from "vue" import App from "./App.vue" import Toast from "./components/Toast" // 定义插件对象 const ToastObj = { install: function (Vue) { // 创建一个Vue的“子类”组件 const ToastConstructor = Vue.extend(Toast) // 创建一个该子类的实例,并挂载到一个元素上 const instance = new ToastConstructor() console.log(instance) // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中 instance.$mount(document.createElement("div")) document.body.appendChild(instance.$el) // 在Vue的原型链上注册方法,控制组件 Vue.prototype.$toast = (msg, duration = 1500) => { instance.message = msg instance.visible = true setTimeout(() => { instance.visible = false }, duration) } } } Vue.use(ToastObj) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount("#app")
{{ msg }}
在借助 vue-cli 的情况下,可以方便实现组件的导入导出,但是在不借助构建工具的情况下,就需要使用其他方法了
Document
“怎么用Vue封装全局toast组件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!