Vue 自定义全局message组件
Posted conglvse
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 自定义全局message组件相关的知识,希望对你有一定的参考价值。
Message.vue
<template>
<transition name="fade">
<div class="message" :class="type" v-if="visible">
<i class="icon-type iconfont" :class="‘icon-‘+type"></i>
<div class="content">{{content}}
<i v-if="hasClose" class="btn-close iconfont icon-close" @click="visible=false"></i>
</div>
</div>
</transition>
</template>
<script>
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);
}
}
}
</script>
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,
});
效果图:
以上是关于Vue 自定义全局message组件的主要内容,如果未能解决你的问题,请参考以下文章