Vue $mount实战之实现消息弹窗组件(2)

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;

您可能感兴趣的文章: