關於vue.extend的使用及說明

2023-03-05 14:00:15

1.Vue.extend的使用

引數：物件
用法：使用Vue構造器，建立一個“子類”，引數是一個包含元件選項的物件，其中,data選項中必須是函數
描述：Vue.extend返回的是一個“擴充套件範例構造器”，也就是預設了部分選項的Vue的範例構造器，它常常服務於Vue.component用來生成元件，可以簡單理解為當在模板中遇到該元件作為標籤的自定義元素時，會自動呼叫“擴充套件範例構造器”來生產元件範例，並掛在到自定義元素上
Vue.extend屬於全域性api
Vue.extend通常用於獨立主鍵開發
Vue.extend通常和Vue.extend + $mount一起使用

2.在什麼情況下使用Vue.extend

元件模板都是事先就建立好的，要是我想從介面動態渲染元件怎麼辦？
有內容都是在 #app 下渲染，註冊元件都是在當前位置渲染。如果我要實現一個類似於 window.alert() 提示元件要求像呼叫 JS 函數一樣呼叫它，該怎麼辦？
全域性元件

3.舉例

比如我們有一個要求就是：實現一個類似於element ui 的 Toast 單框，而element ui 的 Toast 彈框又不能滿足我們現階段的需求，那麼就可以使用Vue.extend + $mountl來實現。

如下圖

如上圖所示

建立一個Toast.vue 在這個裡面寫你想要的Toast 彈框樣式

<template>
  <div class="CustToast" :class="type" v-if="showToast">
    <span class="icon">
      <img :src="iconSrc" />
    </span>
    {{ message }}
  </div>
</template>

<script>
export default {
  /**
         * 自己封裝的Toast v0.2
         * params: showToast Boolean 是否啟用toast 預設 false
         * params: type String       toast提示型別 共normal success，fail，warning 四個選項 預設normal
         * params: message String    toast訊息
         * params: duration Number      toast顯示時間 預設 3000ms
         * */
  name: 'CustToast',
  data () {
    return {
      showToast: true,
      type: 'normal',
      message: '訊息提示',
      duration: 3000
    }
  },
  computed: {
    iconSrc () {
      window.console.log('當前型別', this.type)
      const tipType = ['normal', 'success', 'warning', 'fail']
      if (tipType.includes(this.type)) {
        return require(`@/assets/img/common/${this.type}.svg`)
      } else {
        // eslint-disable-next-line no-throw-literal
        throw 'Toast type資料只允許為 normal, success, warning, fail 四種其中的一種，預設為normal'
      }
    }
  }
}
</script>

<style scoped>
.CustToast {
  position: fixed;
  left: 50%;
  top: 50%;
  background: rgb(233, 233, 235);
  padding: 10px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  animation: show-toast 0.2s;
  color: #909399;
  overflow: hidden;
  display: flex;
  align-items: center;
}
@keyframes show-toast {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.success {
  color: #67c23a;
  background: rgb(225, 243, 216);
}
.warning {
  color: #e6a23c;
  background: rgb(250, 236, 216);
}
.fail {
  color: #f56c6c;
  background: rgb(253, 226, 226);
}
.icon img {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  margin-right: 4px;
}
</style>

新建一個index.js檔案

在點js 檔案中寫一下程式碼

import vue from 'vue'
// 匯入自定義到Toast元件
import CustToast from './CustToast.vue'
// 生成一個擴充套件範例構造器
const ToastConstructor = vue.extend(CustToast)
// 定義彈出元件的函數 接收三個引數 訊息 toast型別 顯示時間
function showToast (message, type = 'normal', duration = 2000) {
  // 範例化一個 CustToast.vue
  const _toast = new ToastConstructor({
    data () {
      return {
        showToast: true,
        type: type,
        message: message,
        duration: duration
      }
    }
  })
  // 把範例化的 CustToast.vue 新增到 body 裡
  const element = _toast.$mount().$el
  document.body.appendChild(element)
  // duration時間到了後隱藏
  setTimeout(() => { _toast.showToast = false }, duration)
}

// 需要在main.js 裡面使用 Vue.use(showToast);
showToast.install = (Vue) => {
  // 將元件註冊到 vue 的 原型鏈裡去,
  // 這樣就可以在所有 vue 的範例裡面使用 this.$toast()
  Vue.prototype.$toast = showToast
}
// 匯出
export default showToast

在你的vue專案的 main.js 中匯入就可以全域性使用了