Side navigation text skeleton effect component – global encapsulation

purpose

When the page is displayed, some data needs to be loaded from the background, and when the network is not good, it may need to wait, so you can do a skeleton layer flashing animation to increase the user experience

General steps

  • Need a component to do placeholder use. The technical term for this placeholder component is the skeleton screen component.
    • Expose some attributes: height, width, background, whether there is a flash.
  • This is a common component that needs to be registered globally. It is recommended that such a component be defined in the vUE plug-in in the future.
  • Complete the left side classification skeleton effect with components.

Be born code

1. Encapsulate components

<template>
  <div class="skeleton" :style="{width,height}" :class="{shan:animated}">
    <! -- 1 box -->
    <div class="block" :style="{backgroundColor:bg}"></div>
    <! -- 2 Flash effect Xtx-skeleton False element -->
  </div>
</template>
<script>
export default {
  name: 'Skeleton'.// Dynamically set height, width, background color, whether to flash down
  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.5 s 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>
Copy the code

Two, package plug-in

// Extend vue's original functionality: global components, custom directives, mount prototype methods, note: no global filters.
// This is the plug-in
// Vue 2.0 plugin writing elements: export an object, install function, default passed in the Vue constructor, Vue based extension
// Vue3.0 plug-in writing elements: export an object, install function, default passed app application instance, app based on extension

import Skeleton from './skeleton.vue'

export default {
  install (app) {
    // Extend on app, which provides component directive functions
    / / if you want to mount a prototype app. Config. GlobalProperties way
    app.component(Skeleton.name, Skeleton)
  }
}
Copy the code

3. Register globally in main.js

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

// Use the plugin in main.js using app.use(plugin)
createApp(App).use(store).use(router).use(MyUI).mount('#app')
Copy the code

Use components in project components

When using components, mutexes V-if and V-else where you want skeleton effects

When encapsulating the component, internally accept the four parameters width, height, bg, and animated via the custom properties props, and pass in the values as required by the scenario when using the component

The following code

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

The final result

conclusion

  1. Encapsulates skeleton screen cell components
  2. Configure the Vue plug-in and configure the global components
  3. The import file imports and configures the UI component library plug-in
  4. The category list uses the skeleton screen component for placeholders