Vue $mount實戰(zhàn)--實現(xiàn)消息彈窗組件

lvzishen 發(fā)布于2019-08-23 17:02 / 2034人閱讀

摘要：之前的項目一直在使用框架，中的組件使用時不需要在寫標簽，而是使用調(diào)用。這樣在組件中就可以通過的形式來使用了參考參考了的代碼封裝組件的一些技巧

之前的項目一直在使用Element-UI框架，element中的Notification、Message組件使用時不需要在html寫標簽，而是使用js調(diào)用。那時就很疑惑，為什么element ui使用this.$notify、this.$message就可以實現(xiàn)這樣的功能？

1、實現(xiàn)消息彈窗組件的幾個問題

如何在任何組件中使用this.$message就可以顯示消息？

如何將消息的dom節(jié)點插入到body中？

同時出現(xiàn)多個消息彈窗時，消息彈窗的z-index如何控制？

2、效果預覽

3、代碼實現(xiàn)

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組件實例，如需有關(guān)閉所有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銷毀時會調(diào)用傳遞進去的onClose，而onClose的處理就是將指定id的message組件從instances中移除
  options.onClose = function (){
    Message._close(id, userOnClose);
  };
  /* 這里傳遞給PMessageControl的data不會覆蓋PMessage.vue中原有的data，而是與PMessage.vue中原有的data進行合并，類似
   * 與mixin，包括傳遞methods、生命周期函數(shù)也是一樣 */
  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，內(nèi)部使用
 * @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;
    }
  }
};
// 關(guān)閉所有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{ /* 使圖標與內(nèi)容能夠垂直居中 */
    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{ /* 使圖標與內(nèi)容能夠垂直居中 */
    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組件的一些技巧

GPU云服務器云服務器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103698.html

發(fā)表評論

登陸后可評論

0條評論

lvzishen

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3055·2023-04-26 02:27
怎樣進行短信群發(fā)？短信群發(fā)效果差的原因有哪些？

閱讀 2770·2021-11-22 13:54
leetcode每日一題-7:整數(shù)反轉(zhuǎn)

閱讀 909·2021-11-12 10:36
程序員的算法趣題Q48: 翻轉(zhuǎn)得到交錯排列

閱讀 3764·2021-10-09 09:44
基于SSM童年零食銷售管理網(wǎng)站

閱讀 3186·2021-10-09 09:41
Python爬蟲：給我一個鏈接，虎牙視頻隨便下載

閱讀 1231·2021-09-22 10:02
燈箱效果如何實現(xiàn) - W3Schools視頻06

閱讀 2842·2019-08-30 15:56
漫畫：如何向女朋友解釋前端

閱讀 3110·2019-08-30 11:02

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vue $mount實戰(zhàn)--實現(xiàn)消息彈窗組件

相關(guān)文章

**封裝Vue組件的一些技巧**

***vue彈窗插件實戰(zhàn)***

**從Dialog管理談到Vue渲染原理**

Vue.extend用法（主要用于需要動態(tài)渲染的組件，或者類似于window.alert() 提示

**手把手教你擼個vue2.0彈窗組件**

發(fā)表評論

0條評論

lvzishen

男|高級講師

TA的文章

tensorflow

怎樣進行短信群發(fā)？短信群發(fā)效果差的原因有哪些？

leetcode每日一題-7:整數(shù)反轉(zhuǎn)

程序員的算法趣題Q48: 翻轉(zhuǎn)得到交錯排列

基于SSM童年零食銷售管理網(wǎng)站

Python爬蟲：給我一個鏈接，虎牙視頻隨便下載

燈箱效果如何實現(xiàn) - W3Schools視頻06

漫畫：如何向女朋友解釋前端

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vue $mount實戰(zhàn)--實現(xiàn)消息彈窗組件

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！