怎麼封裝彈框組件

語言: CN / TW / HK

彈框組件有兩個特點:一是彈框的元素一般是body的子元素,而不是位於#app內部;二是,使用的時候一般通過函數,比如Message("創建成功")

怎麼讓組件顯示在#app外面

message1

其實只是信息差的事,很容易理解的。

一般,組件的模板編譯之後,默認掛載在app裏,但其實我們可以手動選擇將其掛載在任意處。

需要四步:

  • 創建組件類,其實就是Vue.extend(SelfComponent)extend會自動將組件對象轉化為組件類
  • 創建組件實例,可能需要傳入data之類的參數,new xx({data:{...}})
  • 編譯組件實例,就是將template裏的字符串變成實際的dom節點,編譯完之後的節點賦值給了該組件實例的$el
  • 將節點插入到文檔中任意位置即可

message2

怎麼通過函數顯示組件

其實上面的如果實現了,這個就更簡單了,封裝個函數,搞定!!!

message3

當然一般會將Message方法單獨寫在一個文件,這樣使用的時候,只需要引用Message.js即可

怎麼實現this.$message()呢

這個就更沒啥了。。。

main.js那邊將message方法掛載在原型上面即可

Vue.prototype.$message = 剛剛封裝的Message方法
複製代碼

怎麼給message增加類型呢

一般message有成功、錯誤、警告之類的,此時需要在參數那邊多加一個type,當然組件內部也需要根據type顯示不同的樣式。

增加type之後,為了更方便使用,希望能message.success('ok'),其實也不難。

// options是 {type:xx,message:xxx}
const Message = (options) =>{
    // ...
    const messageInstance = new MessageConstructor({
        data: { options }
      });
    //   ...
}
const types =["success","error","warning"]
types.forEach(type=>{
    Message[type] = message =>{
        let options = {}
        options.message = message
        options.type = type
        Message(options)
    }
})
// 使用的時候就可以
Message.success('ok')
複製代碼

怎麼讓message在2s後自動消失呢

一般message顯示個幾秒就不顯示了,這個其實就直接在message組件裏,寫個定時器銷燬組件就好了

mounted(){
    this.timer = setTimeout(()=>{
        // 銷燬組件,這個只能讓組件對象消失,但節點仍然在
        this.$destroy()
        // 再移除節點
        this.$el.parentNode.removeChild(this.$el)
    },2000)
    clearTimeout(this.timer)
}
複製代碼

附註:代碼

代碼:讓組件顯示在#app外面

Message.vue

<!-- 普通的Message組件-->
<template lang="pug">
    div {{message}}
</template>
<script>
export default {
  name: "Message",
  data() {
    return {
      message: ""
    };
  }
};
</script>

複製代碼

使用message的組件

<template lang="pug">
  div#app
    button(@click="showMessage") 點擊顯示
</template>

<script>
import Vue from "vue";
import Message from "./components/Message.vue";
export default {
  name: "App",
  methods: {
    showMessage() {
      // 單純的new Message是不行的,Message只是一個對象,必須是一個組件類
      const MessageConstructor = Vue.extend(Message);
      // 創建message組件實例,傳入data
      const messageInstance = new MessageConstructor({
        data: { message: "hi" }
      });
      // 編譯message組件實例,編譯完之後的dom存放在messageInstance.$el
      messageInstance.$mount();
      // 將dom插入到body裏即可
      document.body.appendChild(messageInstance.$el);
    }
  }
};
</script>

複製代碼

代碼:函數顯示組件

<template lang="pug">
  div#app
    button(@click="showMessage") 點擊顯示
</template>

<script>
import Vue from "vue";
import MessageComponent from "./components/MessageComponent.vue";

// 封裝個函數,即可
const Message = content => {
  // 單純的new Message是不行的,Message只是一個對象,必須是一個組件類
  const MessageConstructor = Vue.extend(MessageComponent);
  // 創建message組件實例,傳入data
  const messageInstance = new MessageConstructor({
    data: { message: content }
  });
  // 編譯message組件實例,編譯完之後的dom存放在messageInstance.$el
  messageInstance.$mount();
  // 將dom插入到body裏即可
  document.body.appendChild(messageInstance.$el);
};

export default {
  name: "App",
  methods: {
    showMessage() {
      Message("hi");
    }
  }
};
</script>

複製代碼