共计 4942 个字符，预计需要花费 13 分钟才能阅读完成。
之前的项目一直在使用 Element-UI 框架，element 中的 Notification、Message 组件使用时不需要在 html 写标签，而是使用 js 调用。那时就很疑惑，为什么 element ui 使用 this.$notify、this.$message 就可以实现这样的功能？
1、实现消息弹窗组件的几个问题
如何在任何组件中使用 this.$message 就可以显示消息？
如何将消息的 dom 节点插入到 body 中？
同时出现多个消息弹窗时，消息弹窗的 z -index 如何控制？
2、效果预览
3、代码实现
PMessage.vue
<template>
<transition name=”message-fade”>
<div class=”p-message”
:class=”[type, extraClass]”
v-show=”show”
@mouseenter=”clearTimer”
@mouseleave=”startTimer”>
<div class=”p-message-container”>
<i class=”p-message-icon” :class=”`p-message-icon-${type}`”></i>
<div class=”p-message-content”>
<slot class=”p-message-content”>
<div v-html=”message”></div>
</slot>
</div>
</div>
</div>
</transition>
</template>
<script>
// 绑定事件
function _addEvent(el, eventName, fn){
if(document.addEventListener){
el.addEventListener(eventName, fn, false);
}else if(window.attachEvent){
el.attactEvent(‘on’ + eventName, fn);
}
};
// 解绑事件
function _offEvent(el, eventName, fn){
if(document.removeEventListener){
el.removeEventListener(eventName, fn, false);
}else if(window.detachEvent){
el.detachEvent(‘on’ + eventName, fn);
}
};
export default {
name: “PMessage”,
data(){
return {
type: ‘success’,
duration: 3000,
extraClass: ”,
message: ”,
timer: null,
closed: false,
show: false
}
},
methods: {
startTimer(){
if(this.duration > 0){
this.timer = setTimeout(() => {
if(!this.closed){
this.close();
}
}, this.duration);
}
},
clearTimer(){
clearTimeout(this.timer);
},
close(){
this.closed = true;
if(typeof this.onClose === ‘function’){
// 调用 onClose 方法，以从 p -message.js 中的 instances 数组中移除当前组件，不移除的话就占空间了
this.onClose();
}
},
// 销毁组件
destroyElement(){
_offEvent(this.$el, ‘transitionend’, this.destroyElement);
// 手动销毁组件
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
},
},
watch: {
// 监听 closed，如果它为 true，则销毁 message 组件
closed(newVal){
if(newVal){
this.show = false;
// message 过渡完成后再去销毁 message 组件及移除元素
_addEvent(this.$el, ‘transitionend’, this.destroyElement);
}
}
},
mounted() {
this.startTimer();
}
}
</script>
<style lang=”stylus”>
@import “p-message.styl”
</style>
p-message.js
import Vue from ‘vue’;
import PMessage from ‘./PMessage.vue’;
import {popupManager} from “../../common/js/popup-manager”;
let PMessageControl = Vue.extend(PMessage);
let count = 0;
// 存储 message 组件实例，如需有关闭所有 message 的功能就需要将每个 message 组件都存储起来
let instances = [];
const isVNode = function (node) {
return node !== null && typeof node === ‘object’ && Object.prototype.hasOwnProperty.call(node, ‘componentOptions’);
};
const Message = function (options) {
options = options || {};
if(typeof options === ‘string’){
options = {
message: options
};
}
let id = ‘message_’ + ++count;
let userOnClose = options.onClose;
// PMsesage.vue 销毁时会调用传递进去的 onClose，而 onClose 的处理就是将指定 id 的 message 组件从 instances 中移除
options.onClose = function (){
Message._close(id, userOnClose);
};
/* 这里传递给 PMessageControl 的 data 不会覆盖 PMessage.vue 中原有的 data，而是与 PMessage.vue 中原有的 data 进行合并，类似
* 与 mixin，包括传递 methods、生命周期函数也是一样 */
let instance = new PMessageControl({
data: options
});
// 传递 vNode
if(isVNode(instance.message)){
instance.$slots.default = [instance.message];
instance.message = null;
}
instance.id = id;
// 渲染元素，随后使用原生 appendChild 将 dom 插入到页面中
instance.$mount();
let $el = instance.$el;
// message 弹窗的 z -index 由 popupManager 来提供
$el.style.zIndex = popupManager.getNextZIndex();
document.body.appendChild($el);
// 将 message 显示出来
instance.show = true;
console.log(instance)
instances.push(instance);
return instance;
};
// message 简化操作
[‘success’,’error’].forEach(function (item) {
Message[item] = options => {
if(typeof options === ‘string’){
options = {
message: options
}
}
options.type = item;
return Message(options);
}
});
/**
* 从 instances 删除指定 message，内部使用
* @param id
* @param userOnClose
* @private
*/
Message._close = function (id, userOnClose) {
for(var i = 0, len = instances.length; i < len; i++){
if(instances[i].id === id){
if(typeof userOnClose === ‘function’){
userOnClose(instances[i]);
}
instances.splice(i, 1);
break;
}
}
};
// 关闭所有 message
Message.closeAll = function () {
for(var i = instances.length – 1; i >= 0; i–){
instances.close();
}
};
export default Message;
popup-manager.js
let zIndex = 1000;
let hasZIndexInited = false;
const popupManager = {
// 获取索引
getNextZIndex(){
if(!hasZIndexInited){
hasZIndexInited = true;
return zIndex;
}
return zIndex++;
}
};
export {popupManager};
p-index.js
import pMessage from ‘./p-message.js’;
export default pMessage;
p-message.styl
.p-message{
position: fixed;
top: 20px;
left: 50%;
padding: 8px 15px;
border-radius: 4px;
background-color: #fff;
color: #000;
transform: translateX(-50%);
transition: opacity .3s, transform .4s;
&.message-fade-enter,
&.message-fade-leave-to{
opacity: 0;
transform: translateX(-50%) translateY(-30px);
}
&.message-fade-enter-to,
&.message-fade-leave{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
&.error{
color: #ff3737;
}
.p-message-icon{/* 使图标与内容能够垂直居中 */
display: table-cell;
vertical-align: middle;
width: 64px;
height: 45px;
&.p-message-icon-success{
background: url(“../../assets/images/icons/message-icon/icon_success.png”) no-repeat 0 0;
}
&.p-message-icon-error{
background: url(“../../assets/images/icons/message-icon/icon_error.png”) no-repeat 0 0;
}
}
.p-message-content{/* 使图标与内容能够垂直居中 */
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
}
main.js
// 引入 pMessage 组件
import pMessage from ‘./components/p-message/p-index.js’;
// 将 pMessage 绑定到 Vue.prototype 中。这样在组件中就可以通过 this.$pMessage() 的形式来使用了
Vue.prototype.$pMessage = pMessage;
3、参考
参考了 Element-UI 的 message 代码
封装 Vue 组件的一些技巧
