vue 添加全局组件_Vue 自定义全局message组件

Message.vue

{{content}}

export default {

name: "MyMessage",

data() {

return {

content: ‘‘,

time: 3000,

visible: false,

type:‘info‘,//‘success‘,‘warning‘,‘error‘

hasClose:false,

}

},

mounted() {

this.close()

},

methods: {

close() {

window.setTimeout(() =>{

this.visible = false

}, this.time);

}

}

}

index.js

给Vue添加$my_message方法,

判断参数，使用$mount()给组件手动挂载参数，然后将组件插入页面中

import Vue from ‘vue‘

import Message from ‘./Message.vue‘

Vue.prototype.$my_message = function(options) {

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

options = {

content: ‘‘

}

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

options = {

content: options

}

}

var message = Vue.extend(Message)

var component = new message({

data: options

}).$mount()

document.body.appendChild(component.$el)

Vue.nextTick(() => {

component.visible = true

})

}

Message.install=function(Vue){

Vue.component(Message.name,Message);

}

export default Message

在main.js里全局引入

import Message from ‘@/components/common/message‘

Vue.use(Message)

页面中调用

this.$my_message(‘这是一个message‘);

//传参的方式

this.$my_message({

content:‘这是一个success提示‘,

time:5000000,

type:‘success‘,

hasClose:true,

});

效果图：