vue3封裝側導航文字骨架效果組件

更新時間：2021年09月28日 09:00:28 作者：新時代農民工Top

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

vue3 項目封裝側導航文字骨架效果組件-全局封裝，供大家參考，具體內容如下

目的

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

大致步驟

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

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

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

落地代碼

一、封裝組件

<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',
  // 使用的時候需要動態(tài)設置 高度，寬度，背景顏色，是否閃下
  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>

二、封裝插件

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

import Skeleton from './skeleton.vue'

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

三、在入口文件 main.js 中全局注冊

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')

四、在項目組件中使用組件

在使用組件的時候，與想要骨架效果的地方進行互斥 v-if 與 v-else

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

代碼如下

<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>

效果