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

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

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

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

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

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

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

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

2、效果預(yù)覽

3、代碼實(shí)現(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;
// 存儲(chǔ)message組件實(shí)例，如需有關(guān)閉所有message的功能就需要將每個(gè)message組件都存儲(chǔ)起來(lái)
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銷毀時(shí)會(huì)調(diào)用傳遞進(jìn)去的onClose，而onClose的處理就是將指定id的message組件從instances中移除
  options.onClose = function (){
    Message._close(id, userOnClose);
  };
  /* 這里傳遞給PMessageControl的data不會(huì)覆蓋PMessage.vue中原有的data，而是與PMessage.vue中原有的data進(jìn)行合并，類似
   * 與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插入到頁(yè)面中
  instance.$mount();
  let $el = instance.$el;
  // message彈窗的z-index由popupManager來(lái)提供
  $el.style.zIndex = popupManager.getNextZIndex();
  document.body.appendChild($el);
  // 將message顯示出來(lái)
  instance.show = true;
  console.log(instance)
  instances.push(instance);
  return instance;
};
// message簡(jiǎn)化操作
["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{ /* 使圖標(biāo)與內(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{ /* 使圖標(biāo)與內(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中。這樣在組件中就可以通過(guò)this.$pMessage()的形式來(lái)使用了
Vue.prototype.$pMessage = pMessage;

3、參考

參考了 Element-UI 的message代碼

封裝Vue組件的一些技巧

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103698.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lvzishen

男|高級(jí)講師

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

TA的文章

tensorflow

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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

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

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

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

**手把手教你擼個(gè)vue2.0彈窗組件**

發(fā)表評(píng)論

0條評(píng)論

lvzishen

男|高級(jí)講師

TA的文章

tensorflow

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

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

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

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

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

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

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！