这篇文章主要介绍了vue的全局提示框组件实例代码,需要的朋友可以参考下
这篇文章给大家介绍一个vue全局提示框组件，具体代码如下所示：
{{message}}
export default { data() { return { visible: false, message: "" }; }};.dialog-tips{ position: fixed; z-index: 100; min-width: 220px; padding: 40px 22px; white-space: nowrap; background-color: #fff; box-shadow: 0px 8px 15px 0 rgba(0, 0, 0, 0.1); text-align: center; .dialog-tips-icon{ width: 54px; height: 54px; @extend %bg-contain; display: inline-block; margin-bottom: 13px; }}.dialog-center { top: 50%; left: 50%; transform: translate(-50%, -50%)}
登录后复制
toast.js
立即学习“前端免费学习笔记（深入）”；
import ToastComponent from './toast.vue'const Toast = {};// 注册ToastToast.install = function (Vue) { // 生成一个Vue的子类 // 同时这个子类也就是组件 const ToastConstructor = Vue.extend(ToastComponent) // 生成一个该子类的实例 const instance = new ToastConstructor(); // 将这个实例挂载在我创建的p上 // 并将此p加入全局挂载点内部 instance.$mount(document.createElement('p')) document.body.appendChild(instance.$el) // 通过Vue的原型注册一个方法 // 让所有实例共享这个方法 Vue.prototype.$toast = (msg, duration = 1500) => { instance.message = msg; instance.visible = true; setTimeout(() => { instance.visible = false; }, duration); }}export default Toast登录后复制
如何使用？
在main.js中
import Vue from 'vue' import Toast from './toast' Vue.use(Toast);
登录后复制
在component中
this.$toast("XXXXXXXXX");登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
有关在Vue中点击组件外关闭组件方法（详细教程）
详细为你解决vue build打包之后首页白屏的问题（详细教程）
有关在vue2.0中路由不显示router-view方法（详细教程）
以上就是在vue中如何使用全局提示框组件？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2749962.html
