vue3封裝側導航文字骨架效果組件
vue3 項目封裝側導航文字骨架效果組件-全局封裝,供大家參考,具體內(nèi)容如下
目的
當顯示頁面的時候,有些數(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
封裝組件的時候,在內(nèi)部通過自定義屬性 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>
效果
總結
1、封裝骨架屏單元格組件
2、配置Vue插件并且配置全局組件
3、入口文件導入并配置UI組件庫這個插件
4、分類列表中使用骨架屏組件進行占位
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
LRU算法在Vue內(nèi)置組件keep-alive中的使用
LRU算法全稱為least recently use 最近最少使用,核心思路是最近被訪問的以后被訪問的概率會變高,那么可以把之前沒被訪問的進行刪除,維持一個穩(wěn)定的最大容量值,從而不會導致內(nèi)存溢出。2021-05-05vue中實現(xiàn)點擊按鈕滾動到頁面對應位置的方法(使用c3平滑屬性實現(xiàn))
這篇文章主要介紹了vue中實現(xiàn)點擊按鈕滾動到頁面對應位置的方法,這段代碼主要使用c3平滑屬性實現(xiàn),需要的朋友可以參考下2019-12-12