vue3封裝側(cè)導(dǎo)航文字骨架效果組件

更新時(shí)間：2021年09月28日 09:00:28 作者：新時(shí)代農(nóng)民工Top

這篇文章主要為大家詳細(xì)介紹了vue3封裝側(cè)導(dǎo)航文字骨架效果組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue3 項(xiàng)目封裝側(cè)導(dǎo)航文字骨架效果組件-全局封裝，供大家參考，具體內(nèi)容如下

目的

當(dāng)顯示頁面的時(shí)候，有些數(shù)據(jù)是需要從后臺(tái)加載，網(wǎng)絡(luò)不好的時(shí)候可能需要等待，那就可以做一個(gè)骨架層閃動(dòng)動(dòng)畫，增加用戶體驗(yàn)

大致步驟

- 需要一個(gè)組件，做占位使用。這個(gè)占位組件有個(gè)專業(yè)術(shù)語：骨架屏組件。
·暴露一些屬性：高，寬，背景，是否有閃動(dòng)畫。

- 這是一個(gè)公用組件，需要全局注冊(cè)，將來這樣的組件建議再vue插件中定義。

- 使用組件完成左側(cè)分類骨架效果。

落地代碼

一、封裝組件

<template>
  <div class="skeleton" :style="{width,height}" :class="{shan:animated}">
    <!-- 1 盒子-->
    <div class="block" :style="{backgroundColor:bg}"></div>
    <!-- 2 閃效果 xtx-skeleton 偽元素 --->
  </div>
</template>
<script>
export default {
  name: 'Skeleton',
  // 使用的時(shí)候需要?jiǎng)討B(tài)設(shè)置 高度，寬度，背景顏色，是否閃下
  props: {
    bg: {
      type: String,
      default: '#efefef'
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    animated: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="less">
.skeleton {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  .block {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}
.shan {
  &::after {
    content: "";
    position: absolute;
    animation: shan 1.5s ease 0s infinite;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-45deg);
  }
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
</style>

二、封裝插件

// 擴(kuò)展vue原有的功能：全局組件，自定義指令，掛載原型方法，注意：沒有全局過濾器。
// 這就是插件
// vue2.0插件寫法要素：導(dǎo)出一個(gè)對(duì)象，有install函數(shù)，默認(rèn)傳入了Vue構(gòu)造函數(shù)，Vue基礎(chǔ)之上擴(kuò)展
// vue3.0插件寫法要素：導(dǎo)出一個(gè)對(duì)象，有install函數(shù)，默認(rèn)傳入了app應(yīng)用實(shí)例，app基礎(chǔ)之上擴(kuò)展

import Skeleton from './skeleton.vue'

export default {
  install (app) {
    // 在app上進(jìn)行擴(kuò)展，app提供 component directive 函數(shù)
    // 如果要掛載原型 app.config.globalProperties 方式
    app.component(Skeleton.name, Skeleton)
  }
}

三、在入口文件 main.js 中全局注冊(cè)

import { createApp } from 'vue'
import App from './App.vue'
import MyUI from './components/library'

// 插件的使用，在main.js使用app.use(插件)
createApp(App).use(store).use(router).use(MyUI).mount('#app')

四、在項(xiàng)目組件中使用組件

在使用組件的時(shí)候，與想要骨架效果的地方進(jìn)行互斥 v-if 與 v-else

封裝組件的時(shí)候，在內(nèi)部通過自定義屬性 props 接收四個(gè)參數(shù) width、height、bg、animated，在使用組建的時(shí)候根據(jù)場(chǎng)景需求傳入相應(yīng)的值即可

代碼如下

<span v-else>
  <Skeleton width="60px" height="18px" style="margin-right:5px" bg="rgba(255,255,255,0.2)" :animated="true" />
  <Skeleton width="50px" height="18px" bg="rgba(255,255,255,0.2)" :animated="true" />
</span>

效果