Vue.extend實現組件庫message組件示例詳解

Posted on by

概述

當我們使用組件庫的時候，某些組件並不是直接放到模板當中進行使用，而是通過api的方式調用生成組件並且掛在到我們的頁面中，其中最常見的就是message組件，我們在組件庫中看到的多數都是api調用的方式生成。記錄自己基本實現message組件。

Vue.extend

在vue中，要實現通過api方式實現組件的使用，這個aip是必不可少的，因此我們先瞭解下這個全局api的用法，官網說的很晦澀難懂，我的理解就是通過參數傳遞一個配置對象（這個配置對象就是我們模板中export default的那個對象，例如data,methods,props等等）都可以傳遞，接下來該函數會根據我們的配置對象生成一個繼承自Vue的子組件構造函數，然後我們就可以通過實例化構造函數，生成對應的組件，然後我們就可以掛載到頁面瞭。

message 組件配置對象（就是.vue文件）

<template>
  <div
    :class="['message-box', 'message-box-' + type]"
    :style="{ top: top + 'px' }"
  >
    <header>
      <span class="close">X</span>
    </header>
    <div class="message--box-content">
      {{ message }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    message: {
      type: String,
      default: "this is message box",
    },
    type: {
      validator(value) {
        return ["success", "error", "default"].indexOf(value) !== -1;
      },
      default: "default",
    },
    top: {
      type: Number,
      default: 20,
    },
  },
};
</script>
<style lang="less">
.message-box {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 50px;
  background-color: #ccc;
  .close {
    position: absolute;
    top: 0;
    right: 5px;
    cursor: pointer;
  }
  .message--box-content {
    line-height: 50px;
    text-indent: 2em;
  }
  &.message-box-success {
    background-color: green;
  }
  &.message-box-error {
    background-color: red;
  }
  &.message-box-default {
    background-color: #eee;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

message 生成組件的函數

import MessageBoxOption from "./index.vue";
import Vue from "vue";
let messageBoxConstructor = Vue.extend({
  ...MessageBoxOption,
});
export default {
  install(Vue) {
    Vue.prototype.$Message = {
      instanceList: [],
      hide(types) {
        for (let instance of this.instanceList) {
          if (instance.types == types) {
            instance &&
              document.body.removeChild(instance.$el) &&
              Reflect.deleteProperty(this, types);
          }
        }
      },
      success(message) {
        if (!this.vmSuccess) {
          let messageBox = new messageBoxConstructor({
            propsData: {
              message,
              type: "success",
              top: (this.instanceList.length + 1) * 55,
            },
          });
          let $Message = messageBox.$mount();
          this.vmSuccess = $Message;
          this.instanceList.push({ ...$Message, types: "vmSuccess" });
          document.body.appendChild($Message.$el);
          setTimeout(() => {
            this.hide("vmSuccess");
          }, 4000);
        }
      },
      error(message) {
        if (!this.vmError) {
          let messageBox = new messageBoxConstructor({
            propsData: {
              message,
              type: "error",
              top: (this.instanceList.length + 1) * 55,
            },
          });
          let $Message = messageBox.$mount();
          this.vmError = $Message;
          this.instanceList.push({ ...$Message, types: "vmError" });
          document.body.appendChild($Message.$el);
          setTimeout(() => {
            this.hide("vmError");
          }, 6000);
        }
      },
    };
  },
};

使用方法

<template>
  <div id="app">
    <button @click="handleShowMessageBox">顯示</button>
    <button @click="handleHideMessageBox">隱藏</button>
  </div>
</template>
<script>
import MessageBox from "./components/MessageBox/index.vue";
export default {
  name: "App",
  components: { MessageBox },
  methods: {
    handleShowMessageBox() {
      this.$Message.success("恭喜你，這是一條成功消息");
      this.$Message.error("sorry,這是一條失敗消息");
    },
    handleHideMessageBox() {
      this.$Message.hide();
    },
  },
};
</script>

效果圖

總結

  • 要通過js的方式通過api調用生成，關鍵在在於Vue.extend函數的使用，上面隻是個簡單版本的，可以根據自己的需要，自動加以擴展。
  • 我們這種彈窗組件一般做成單例，因此點擊的時候不會重復出現相同類型的組件。

以上就是Vue.extend實現組件庫message組件示例詳解的詳細內容，更多關於Vue.extend message組件庫的資料請關註WalkonNet其它相關文章！

推薦閱讀：