vue获取全局组件_基于vue写一个全局Message组件的实现

不知道大家在用一些ui框架，比如element-ui的时候，有没有觉得一些全局组件。this.$message(),this.toast()等，用起来很爽。他们不像其他的组件，需要去导入，去注册。麻烦的很。

看了element的源码，自己也撸了一个。其中包括了以前没有接触过的插件知识，哎，感觉自己对vue的理解还是不够，只停留在了使用的这阶段。需要更多的往深层次的地方去钻。不说废话了，直接上代码。

效果演示

全局组件需要一个index.js文件去注册

blogmessage.vue

这里的script是用ts写的。大家只需将这里稍做修改就可以了

{{content}}

import { component, vue, watch, prop } from "vue-property-decorator";

@component({

components: {}

})

export default class extends vue {

private content: string = "";

private visible: boolean = false;

private type: string = "info"; // 'success','error'

private starttimer() {

window.settimeout(() => {

this.visible = false;

}, 3000);

}

private mounted() {

this.starttimer();

}

}

.message-wrap {

position: fixed;

background-color: #44b0f3;

color: #ffffff;

left: 40%;

width: 20%;

top: 25px;

height: 40px;

z-index: 1001;

border-radius: 4px;

text-align: center;

border: 1px solid #ebeef5;

.content {

line-height: 40px;

}

}

.error {

background-color: #fef0f0;

color: #f56c6c;

}

.success {

background-color: #f0f9eb;

color: #67c23a;

}

.slide-enter-active,

.slide-leave-active {

transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);

transition: all 0.2s ease;

}

.slide-enter,

.slide-leave-to {

transform: translatey(-20px);

opacity: 0;

}

index.js

import vue from 'vue'

import blogmessage from './blogmessage.vue'

const messagebox = vue.extend(blogmessage) // 创建的是一个组件构造器，不是实例

const message = {

install: (options, type, duration) => {

if (options === undefined || options === null) {

options = {

content: ''

}

} else if (typeof options === 'string' || typeof options === 'number') {

options = {

content: options

}

if (type != undefined && options != null) {

options.type = type;

}

}

let instance = new messagebox({

data: options

}).$mount()

document.body.appendchild(instance.$el) // 添加dom元素

vue.nexttick(() => { // dom元素渲染完成后执行回调

instance.visible = true

})

}

}

vue.prototype.$message = message.install;

['success', 'error'].foreach(type => {

vue.prototype.$message[type] = (content) => {

return vue.prototype.$message(content, type)

}

})

export default message

使用组件

1.全局注册

import vue from 'vue';

import message from '@/components/common/message';

vue.use(message);

2.调用方法

private test1() {

this.$message("这是一条普通消息");

}

private test2() {

this.$message.success("这是一条成功消息");

// this.$message("这是一条成功消息", "success");

}

private test3() {

this.$message.error("这是一条失败消息");

// this.$message("这是一条失败消息", "error");

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！