这篇文章主要介绍了vue如何实现消息提示全局组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联公司长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为安溪企业提供专业的网站建设、成都网站建设,安溪网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
使用vue-cli3.0生成项目
toast全局组件编写
/src/toast/toast.vue
{{text}}
/src/toast/index.js
import vue from 'vue' import toastComponent from './toast.vue' // 组件构造器,构造出一个 vue组件实例 const ToastConstructor = vue.extend(toastComponent) function showToast ({ text, type, duration = 2000 }) { const toastDom = new ToastConstructor({ el: document.createElement('div'), data () { return { isShow: true, // 是否显示 text: text, // 文本内容 type: type // 类型 } } }) // 添加节点 document.body.appendChild(toastDom.$el) // 过渡时间 setTimeout(() => { toastDom.isShow = false }, duration) } // 全局注册 function registryToast () { vue.prototype.$toast = showToast } export default registryToast
全局注册
/main.js
import toastRegistry from './toast/index' Vue.use(toastRegistry)
调用
/src/views/home.vue
感谢你能够认真阅读完这篇文章,希望小编分享的“vue如何实现消息提示全局组件”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!