vue 定义全局弹框_在vue中如何使用全局提示框组件？ -

thinkphp开发的一个项目，登录成功后又跳转到登录页面，在提交信息后输出session都是正常的，没有问题，但是页面跳转后，session出现丢失现象，无法正常完成登陆。通过查找资料，发现原来是bom头的原因。受COOKIE送出机制...

这篇文章主要介绍了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 = {};

// 注册Toast

Toast.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方法(详细教程)