PS:首先分析$message使用方法
1.import {Message} from ‘element-ui’ // 可以在组件中引用
2.this.$message.success(‘xxx’) // 可以在组件钩子中直接使用
相信第一种方法写过vue文件的应该都会写吧,我这边着重讲下第二种方法,其实第二种方法是在第一种方法中将组件的方法暴露在vue的原型上。
// src/plugin/message.vue
<template>
<div class="el-messages">
<div v-for="m in messages" :key="m.id">{{m.message}}</div>
</div>
</template>
<script>
export default {
data() {
return {messages: []}
},
mounted() {
this.id = 0; // 当前消息组件的id
},
methods: {
add(options) {
const id = this.id++;
const layer = {...options, id}
this.messages.push(layer)
setTimeout(() => {
this.remove(layer)
}, options.duration)
},
remove(layer) {
this.messages = this.messages.filter(message => message.id !== layer.id)
}
}
}
</script>
// src/plugin/message.js
import Vue from 'vue'
import MessageComponent from './Message.vue'
let vm = null
const getInstance = function() {
if(!vm) {
// 单例模式
vm = new Vue({
render: h => h(MessageComponent)
}).$mount()
document.body.appendChild(vm.$el)
}
return vm.$children[0];
}
const Message = {
info(options) {
getInstance().add(options)
}
}
export {
Message,
}
export default {
install(Vue) {
Vue.prototype.$message = {
info: Message.info
}
}
}
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import Message from './plugin/message'
Vue.config.productionTip = false
Vue.use(Message)
new Vue({
render: h => h(App),
}).$mount('#app')
- 本文作者: MrRetro博客
- 本文链接: http://mrretro.gitee.io/retroblog/retroblog/2022/01/09/如何实现一个element-ui中的方法/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!