欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年09月28日 09:00:28   作者:新時代農(nóng)民工Top  
這篇文章主要為大家詳細介紹了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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • vue混入mixin的介紹及理解

    vue混入mixin的介紹及理解

    混入(mixin)提供了一種非常靈活的方式,來分發(fā)vue組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被“混合”進入該組件本身的選項
    2022-08-08
  • Vue過濾器filters的用法及時間戳轉換問題

    Vue過濾器filters的用法及時間戳轉換問題

    Vue的filters過濾器是比較常見的一個知識點,下面我將結合時間戳轉換的例子帶你快速了解filters的用法,感興趣的朋友一起看看吧
    2021-09-09
  • 詳解vue 模版組件的三種用法

    詳解vue 模版組件的三種用法

    本篇文章主要介紹了詳解vue 模版組件的三種用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • vue去除數(shù)組指定位置元素的幾種方法

    vue去除數(shù)組指定位置元素的幾種方法

    這篇文章主要介紹了vue剔除數(shù)組指定位置元素的幾種方法,文中主要介紹了單個去除和批量去除這兩種方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下
    2024-03-03
  • Electron集成React和Vue流程方法講解

    Electron集成React和Vue流程方法講解

    Electron也可以快速地將你的網(wǎng)站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Electron集成React和Vue的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • Vue 加載遠程組件的解決方案

    Vue 加載遠程組件的解決方案

    最近的項目有一個加載遠程組件的需求,基于此我對 Vue 加載遠程組件的方案進行了研究,并且整理了兩個可行的解決方案,有感興趣的小伙伴跟著小編一起來看看吧
    2023-07-07
  • LRU算法在Vue內(nèi)置組件keep-alive中的使用

    LRU算法在Vue內(nèi)置組件keep-alive中的使用

    LRU算法全稱為least recently use 最近最少使用,核心思路是最近被訪問的以后被訪問的概率會變高,那么可以把之前沒被訪問的進行刪除,維持一個穩(wěn)定的最大容量值,從而不會導致內(nèi)存溢出。
    2021-05-05
  • vue自定義封裝指令以及實際使用

    vue自定義封裝指令以及實際使用

    市面上大多數(shù)關于Vue.js自定義指令的文章都在講語法,很少講實際的應用場景和用例,下面這篇文章主要給大家介紹了關于vue自定義封裝指令以及實際使用的相關資料,需要的朋友可以參考下
    2022-01-01
  • vue中實現(xiàn)點擊按鈕滾動到頁面對應位置的方法(使用c3平滑屬性實現(xiàn))

    vue中實現(xiàn)點擊按鈕滾動到頁面對應位置的方法(使用c3平滑屬性實現(xiàn))

    這篇文章主要介紹了vue中實現(xiàn)點擊按鈕滾動到頁面對應位置的方法,這段代碼主要使用c3平滑屬性實現(xiàn),需要的朋友可以參考下
    2019-12-12
  • 一次搞清Vue3中組件通訊的全部方式

    一次搞清Vue3中組件通訊的全部方式

    毫無疑問,組件通訊是Vue中非常重要的技術之一,它的出現(xiàn)能夠使我們非常方便的在不同組件之間進行數(shù)據(jù)的傳遞,以達到數(shù)據(jù)交互的效果,所以,學習組件通訊技術是非常有必要的,本文將一次解決Vue3中組件通訊的全部方式,總有你想要的那一種,需要的朋友可以參考下
    2024-09-09

最新評論