vue如何实现消息提示全局组件
这篇文章主要介绍了vue如何实现消息提示全局组件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联公司长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为安溪企业提供专业的网站建设、成都网站建设，安溪网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
使用vue-cli3.0生成项目
toast全局组件编写
/src/toast/toast.vue
{{text}}
.app-toast {
position: fixed;
left: 50%;
top: 50%;
background: #ccc;
padding: 10px;
border-radius: 5px;
transform: translate(-50%, -50%);
color: #fff;
}
.info {
background: #00aaee;
}
.success {
background: #00ee6b;
}
.wraning {
background: #eea300;
}
.danger {
background: #ee000c;
}
/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如何实现消息提示全局组件”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
