建站
咨询
售后
建站咨询
Vue$mount实战之实现消息弹窗组件
之前的项目一直在使用Element-UI框架，element中的Notification、Message组件使用时不需要在html写标签，而是使用js调用。那时就很疑惑，为什么element ui使用this.$notify、this.$message就可以实现这样的功能？
创新互联公司从2013年开始，先为牟平等服务建站，牟平等地企业，进行企业商务咨询服务。为牟平企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
1、实现消息弹窗组件的几个问题
- 如何在任何组件中使用this.$message就可以显示消息？
- 如何将消息的dom节点插入到body中？
- 同时出现多个消息弹窗时，消息弹窗的z-index如何控制？
2、效果预览
3、代码实现
PMessage.vue
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;
本文标题：Vue$mount实战之实现消息弹窗组件
网页地址：http://scgulin.cn/article/jhdppi.html
