亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue自定義加載指令v-loading占位圖指令v-showimg

 更新時間：2022年08月09日 09:55:30   作者：我的div丟了腫么辦  
這篇文章主要為大家介紹了vue自定義加載指令和v-loading占位圖指令v-showimg的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

了解自定義指令的鉤子函數(shù)

bind(){}：每當(dāng)指令綁定到元素上的時候，就會立刻執(zhí)行bind這個函數(shù)。只調(diào)用一次。
和css相關(guān)的操作，可以放在這個鉤子函數(shù)中。

inserted(){}：元素插入到DOM中的時候，會執(zhí)行inserted函數(shù)。只調(diào)用一次。

update(){}當(dāng)數(shù)據(jù)跟新的時候，就會執(zhí)行updated,可能會觸發(fā)多次

可以通過 bing.value(新值) !== bing.oldValue(舊值) 來判斷跟新的時候做的處理

componentUpdated(){}指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用

unbind(){}：只調(diào)用一次，指令與元素解綁時調(diào)用

所有的鉤子函數(shù)的參數(shù)都有以下：

el：指令所綁定的元素，可以用來直接操作 DOM

binding：一個對象

注冊成為全局指令

//main.js文件中
Vue.directive("color", {
  鉤子函數(shù)
})

需求描述

做一個加載動畫

在我們請求接口的時候，顯示加載動畫。

當(dāng)我們請求成功后，移除加載動畫。

我們將會通過自定義指令 v-loading="isLoadFlag"來控制加載動畫的開啟和移除。

我們將會在頁面中使用 ListCom.vue 列表組件。 

加載動畫組件 LoadingCom.vue。

自定義鉤子 loading.js

列表組件 ListCom.vue

<template>
    <div class="combox">
        <div v-for="(item,index) in listArr" :key="index">
            人物{{ item.name }}---- 描述 {{ item.dec}}
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            listArr: {
                type: Array,
                default: () => []
            },
       },
    }
</script>

加載動畫組件 LoadingCom.vue

<template>
    <div class="loadingcssbox">
      <img src="../../assets/loading.gif"/>
    </div>
</template>

鉤子函數(shù) loading.js

import Vue from 'vue'
//引入加載動畫組件
import LoadingCom from './LoadingCom.vue'
const loadingDirectiive = {
    inserted(el, bing) { 
      // el ==>表示被綁定了指令的那個元素，這個el是一個原生的js對象。
      // bing ==> 指令相關(guān)的信息
      // 得到一個組件的構(gòu)造函數(shù)
      const loadingCtor = Vue.extend(LoadingCom)
      // 得到實例loadingComp
      const loadingComp = new loadingCtor()
      // 獲取實例的html
      const htmlLoading = loadingComp.$mount().$el
      // 將html放在el的實例上面去
      el.myHtml = htmlLoading
      if (bing.value) { 
          appendHtml(el)
      }
    },
    update(el, bing) { 
      // bing.value 是v-loading綁定的那個值； true 要顯示加載動畫
      //新值 bing.value與舊值bing.oldValue是否相等
      if (bing.value !== bing.oldValue ) { 
          bing.value ? appendHtml(el) : removeHtml(el)
      }
    }
}
function appendHtml(el) { 
  el.appendChild(el.myHtml)
}
function removeHtml(el) { 
  el.removeChild(el.myHtml)
}
export default loadingDirectiive

分析上面的代碼

// 得到一個組件的構(gòu)造函數(shù)
const loadingCtor = Vue.extend(LoadingCom)
// 得到實例loadingComp
const loadingComp = new loadingCtor()
// 獲取實例的html。將html放在el的實例上面去。
// 放在el實例上的優(yōu)勢是方便訪問。
// $el是可以訪問加載動畫的html。
// 這樣就可以將它添加到某一個節(jié)點上。同時也方便移除
const htmlLoading = loadingComp.$mount().$el
el.myHtml = htmlLoading

main.js 中 注冊成為全局指令

import loadingDirectiive from './components/loading/loading'
Vue.directive('loading', loadingDirectiive)
<!-- 全局指令的注冊方式 -->
Vue.directive("color", {
  鉤子函數(shù)
})

頁面中使用加載動畫指令 v-loading

<template>
  <div class="box">
    <ListCom :listArr="listArr" v-loading="isLoadFlag"></ListCom>
  </div>
</template>
<script>
import ListCom from '../components/ListCom.vue'
export default {
  components: {
    ListCom
  },
  data() {
    return {
      listArr: [],
      //通過isLoadFlag來控制動畫是否開啟
      isLoadFlag:false,
    }
  },
  created() { 
    this.sendAPi()
  },
  methods: {
    sendAPi() { 
      this.isLoadFlag = true;//開啟加載動畫
      setTimeout(() => { 
        this.listArr = [
          { name: '齊玄幀', dec: '五百年前的呂祖', },
          { name: '王仙芝', dec: '白帝轉(zhuǎn)世' },
          { name: '李淳罡', dec: '李淳罡當(dāng)初的實力是絕對的天下第一的' },
          { name: '鄧太阿', dec: '徐鳳年的舅舅' },
          { name: '曹長卿', dec: '這位號稱獨(dú)占天象八斗風(fēng)流，實力排進(jìn)天下前三' }
        ]
        //移除加載動畫
        this.isLoadFlag = false
      },3000)
    }
  }
}
</script>

占用圖指令 v-showimg

當(dāng)沒有數(shù)據(jù)的時候，顯示一個占位圖。

我們將會通過自定義指令 v-showimg="showImgFlag"來控制是否顯示占位圖

占位圖組件 ShowImgCom.vue。

自定義鉤子 showimg.js

廢話不多說，直接上代碼。

占位圖組件 ShowImgCom.vue

<template>
    <div class="showimgbox">
        <img src="../../assets/nodata.png"/>
        <p>暫無數(shù)據(jù)</p>
    </div>
</template>

指令的書寫 showimg.js

import Vue from 'vue'
import ShowImgCom from './ShowImgCom.vue'
const showimgDirectiive = {
  inserted(el, bing) {
    const showimgCtor = Vue.extend(ShowImgCom)
    const showImgComp = new showimgCtor()
    const htmlSHowPic = showImgComp.$mount().$el
    el.myHtml = htmlSHowPic
    if (bing.value) {
        appendHtml(el)
    }
  },
  update(el, bing) {
    if (bing.value !== bing.oldValue) {
      bing.value ? appendHtml(el) : removeHtml(el)
    }
  }
}
function appendHtml(el) {
  el.appendChild(el.myHtml)
}
function removeHtml(el) {
  el.removeChild(el.myHtml)
}
export default showimgDirectiive

main.js注冊

import showimgDirectiive from './components/ShowImg/showimg'
Vue.directive('showimg', showimgDirectiive)

指令的使用v-showimg指令

<template>
  <div class="box" v-showimg="showImgFlag">
    <ListCom :listArr="listArr" v-loading="isLoadFlag"></ListCom>
  </div>
</template>
<script>
import ListCom from '../components/ListCom.vue'
export default {
  components: {
    ListCom
  },
  data() {
    return {
      listArr: [],
      isLoadFlag: false,
      showImgFlag:false
    }
  },
  created() { 
    this.sendAPi()
  },
  methods: {
    sendAPi() { 
      this.isLoadFlag = true;//加載中
      setTimeout(() => { 
        this.listArr = []
        this.isLoadFlag = false 
        //是否顯示占位圖
        if (this.listArr && this.listArr.length === 0) {
          this.showImgFlag = true
        } else { 
          this.showImgFlag =false
        }
      },3000)
    }
  }
}
</script>

以上就是vue自定義加載指令v-loading占位圖指令v-showimg的詳細(xì)內(nèi)容，更多關(guān)于vue自定義加載占位圖指令的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論