欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于vue.extend的使用及說(shuō)明

 更新時(shí)間:2023年03月04日 14:54:41   作者:qq_43634411  
這篇文章主要介紹了關(guān)于vue.extend的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.Vue.extend的使用

  • 參數(shù):對(duì)象
  • 用法:使用Vue構(gòu)造器,創(chuàng)建一個(gè)“子類”,參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象,其中,data選項(xiàng)中必須是函數(shù)
  • 描述:Vue.extend返回的是一個(gè)“擴(kuò)展實(shí)例構(gòu)造器”,也就是預(yù)設(shè)了部分選項(xiàng)的Vue的實(shí)例構(gòu)造器,它常常服務(wù)于Vue.component用來(lái)生成組件,可以簡(jiǎn)單理解為當(dāng)在模板中遇到該組件作為標(biāo)簽的自定義元素時(shí),會(huì)自動(dòng)調(diào)用“擴(kuò)展實(shí)例構(gòu)造器”來(lái)生產(chǎn)組件實(shí)例,并掛在到自定義元素上
  • Vue.extend屬于全局api
  • Vue.extend通常用于獨(dú)立主鍵開(kāi)發(fā)
  • Vue.extend通常和Vue.extend + $mount一起使用

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

  • 組件模板都是事先就創(chuàng)建好的,要是我想從接口動(dòng)態(tài)渲染組件怎么辦?
  • 有內(nèi)容都是在 #app 下渲染,注冊(cè)組件都是在當(dāng)前位置渲染。如果我要實(shí)現(xiàn)一個(gè)類似于 window.alert() 提示組件要求像調(diào)用 JS 函數(shù)一樣調(diào)用它,該怎么辦?
  • 全局組件

3.舉例

比如我們有一個(gè)要求就是:實(shí)現(xiàn)一個(gè)類似于element ui 的 Toast 單框,而element ui 的 Toast 彈框又不能滿足我們現(xiàn)階段的需求,那么就可以使用Vue.extend + $mountl來(lái)實(shí)現(xiàn)。

如下圖

如上圖所示

建立一個(gè)Toast.vue 在這個(gè)里面寫(xiě)你想要的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 默認(rèn) false
         * params: type String       toast提示類型 共normal success,fail,warning 四個(gè)選項(xiàng) 默認(rèn)normal
         * params: message String    toast消息
         * params: duration Number      toast顯示時(shí)間 默認(rèn) 3000ms
         * */
  name: 'CustToast',
  data () {
    return {
      showToast: true,
      type: 'normal',
      message: '消息提示',
      duration: 3000
    }
  },
  computed: {
    iconSrc () {
      window.console.log('當(dāng)前類型', 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數(shù)據(jù)只允許為 normal, success, warning, fail 四種其中的一種,默認(rèn)為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>

新建一個(gè)index.js文件

在點(diǎn)js 文件中寫(xiě)一下代碼

import vue from 'vue'
// 導(dǎo)入自定義到Toast組件
import CustToast from './CustToast.vue'
// 生成一個(gè)擴(kuò)展實(shí)例構(gòu)造器
const ToastConstructor = vue.extend(CustToast)
// 定義彈出組件的函數(shù) 接收三個(gè)參數(shù) 消息 toast類型 顯示時(shí)間
function showToast (message, type = 'normal', duration = 2000) {
  // 實(shí)例化一個(gè) CustToast.vue
  const _toast = new ToastConstructor({
    data () {
      return {
        showToast: true,
        type: type,
        message: message,
        duration: duration
      }
    }
  })
  // 把實(shí)例化的 CustToast.vue 添加到 body 里
  const element = _toast.$mount().$el
  document.body.appendChild(element)
  // duration時(shí)間到了后隱藏
  setTimeout(() => { _toast.showToast = false }, duration)
}

// 需要在main.js 里面使用 Vue.use(showToast);
showToast.install = (Vue) => {
  // 將組件注冊(cè)到 vue 的 原型鏈里去,
  // 這樣就可以在所有 vue 的實(shí)例里面使用 this.$toast()
  Vue.prototype.$toast = showToast
}
// 導(dǎo)出
export default showToast

在你的vue項(xiàng)目的 main.js 中導(dǎo)入就可以全局使用了

使用

使用效果

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue多選列表組件深入詳解

    Vue多選列表組件深入詳解

    這篇文章主要介紹了Vue多選列表組件深入詳解,這個(gè)是vue的基本組件,有需要的同學(xué)可以研究下
    2021-03-03
  • vue自定義開(kāi)發(fā)滑動(dòng)圖片驗(yàn)證組件

    vue自定義開(kāi)發(fā)滑動(dòng)圖片驗(yàn)證組件

    這篇文章主要為大家詳細(xì)介紹了vue自定義開(kāi)發(fā)滑動(dòng)圖片驗(yàn)證組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue項(xiàng)目中是否使用store原理深究

    Vue項(xiàng)目中是否使用store原理深究

    這篇文章主要為大家介紹了在Vue項(xiàng)目中是否使用store原理深究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • Vue3處理錯(cuò)誤邊界(error boundaries)的示例代碼

    Vue3處理錯(cuò)誤邊界(error boundaries)的示例代碼

    在開(kāi)發(fā) Vue 3 應(yīng)用時(shí),處理錯(cuò)誤邊界(Error Boundaries)是一個(gè)重要的考量,在 Vue 3 中實(shí)現(xiàn)錯(cuò)誤邊界的方式與 React 等其他框架有所不同,下面,我們將深入探討 Vue 3 中如何實(shí)現(xiàn)錯(cuò)誤邊界,并提供一些示例代碼幫助理解什么是錯(cuò)誤邊界,需要的朋友可以參考下
    2024-10-10
  • Django+Vue.js實(shí)現(xiàn)搜索功能

    Django+Vue.js實(shí)現(xiàn)搜索功能

    本文主要介紹了Django+Vue.js實(shí)現(xiàn)搜索功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2024-06-06
  • Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式實(shí)例詳解

    Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式實(shí)例詳解

    這篇文章主要介紹了Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式,使用原生js實(shí)現(xiàn)拖拽,VUe使用js實(shí)現(xiàn)拖拽穿梭框,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-09-09
  • 手寫(xiě)Vue源碼之?dāng)?shù)據(jù)劫持示例詳解

    手寫(xiě)Vue源碼之?dāng)?shù)據(jù)劫持示例詳解

    這篇文章主要給大家介紹了手寫(xiě)Vue源碼之?dāng)?shù)據(jù)劫持的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • Vue3組合式API之getCurrentInstance詳解

    Vue3組合式API之getCurrentInstance詳解

    我們可以通過(guò)?getCurrentInstance這個(gè)函數(shù)來(lái)返回當(dāng)前組件的實(shí)例對(duì)象,也就是當(dāng)前vue這個(gè)實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于Vue3組合式API之getCurrentInstance的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • IDEA中Debug調(diào)試VUE前端項(xiàng)目調(diào)試JS只需兩步

    IDEA中Debug調(diào)試VUE前端項(xiàng)目調(diào)試JS只需兩步

    這篇文章主要為大家介紹了在IDEA中Debug調(diào)試VUE前端項(xiàng)目,只需要兩步就可以調(diào)試JS的實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-02-02
  • 在Vant的基礎(chǔ)上封裝下拉日期控件的代碼示例

    在Vant的基礎(chǔ)上封裝下拉日期控件的代碼示例

    這篇文章主要介紹了在Vant的基礎(chǔ)上封裝下拉日期控件的代碼示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12

最新評(píng)論