vue3封裝側(cè)導(dǎo)航文字骨架效果組件
vue3 項(xiàng)目封裝側(cè)導(dǎo)航文字骨架效果組件-全局封裝,供大家參考,具體內(nèi)容如下
目的
當(dāng)顯示頁(yè)面的時(shí)候,有些數(shù)據(jù)是需要從后臺(tái)加載,網(wǎng)絡(luò)不好的時(shí)候可能需要等待,那就可以做一個(gè)骨架層閃動(dòng)動(dòng)畫,增加用戶體驗(yàn)
大致步驟
- 需要一個(gè)組件,做占位使用。這個(gè)占位組件有個(gè)專業(yè)術(shù)語(yǔ):骨架屏組件。
·暴露一些屬性:高,寬,背景,是否有閃動(dòng)畫。
- 這是一個(gè)公用組件,需要全局注冊(cè),將來(lái)這樣的組件建議再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>
效果
總結(jié)
1、封裝骨架屏單元格組件
2、配置Vue插件并且配置全局組件
3、入口文件導(dǎo)入并配置UI組件庫(kù)這個(gè)插件
4、分類列表中使用骨架屏組件進(jìn)行占位
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue過濾器filters的用法及時(shí)間戳轉(zhuǎn)換問題
Vue的filters過濾器是比較常見的一個(gè)知識(shí)點(diǎn),下面我將結(jié)合時(shí)間戳轉(zhuǎn)換的例子帶你快速了解filters的用法,感興趣的朋友一起看看吧2021-09-09LRU算法在Vue內(nèi)置組件keep-alive中的使用
LRU算法全稱為least recently use 最近最少使用,核心思路是最近被訪問的以后被訪問的概率會(huì)變高,那么可以把之前沒被訪問的進(jìn)行刪除,維持一個(gè)穩(wěn)定的最大容量值,從而不會(huì)導(dǎo)致內(nèi)存溢出。2021-05-05vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法(使用c3平滑屬性實(shí)現(xiàn))
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法,這段代碼主要使用c3平滑屬性實(shí)現(xiàn),需要的朋友可以參考下2019-12-12