Vue3 encapsulates the side navigation text skeleton effect component

Vue3 project encapsulation side navigation text skeleton effect component-global encapsulation, for your reference, the specific contents are as follows

Purpose

When displaying a page, some data needs to be loaded from the background. When the network is not good, you may need to wait. In this case, you can make a skeleton layer flashing animation to enhance the user experience.

General steps

- A component is needed to serve as a placeholder. This placeholder component has a professional term: skeleton screen component.
Expose some properties: height, width, background, whether there is a flash animation.

- This is a public component that needs to be registered globally. In the future, it is recommended that such components be defined in the vue plug-in.

- Use components to complete the classification skeleton effect on the left.

Landing code

1. Packaging 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 pseudo element--->
  </div>
</template>
<script>
export default {
  name: 'Skeleton',
  // When using, you need to dynamically set the height, width, background color, and whether to flash 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>

2. Packaging plugin

// Expand the original functions of Vue: global components, custom instructions, mounting prototype methods, note: there is no global filter.
// This is the plugin // Vue2.0 plugin writing elements: export an object, have an install function, pass in the Vue constructor by default, and extend on the basis of Vue // Vue3.0 plugin writing elements: export an object, have an install function, pass in the app application instance by default, and extend on the basis of app import Skeleton from './skeleton.vue'

export default {
  install (app) {
    // Expand on app, app provides component directive function // If you want to mount the prototype app.config.globalProperties method app.component(Skeleton.name, Skeleton)
  }
}

3. Global registration in the entry file main.js

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

// To use the plugin, use app.use(plugin) in main.js
createApp(App).use(store).use(router).use(MyUI).mount('#app')

4. Using components in project components

When using components, mutually exclusive v-if and v-else are used where you want the skeleton effect

When encapsulating a component, it receives four parameters width, height, bg, and animated through the custom property props internally. When using the component, you can pass in the corresponding values according to the scene requirements.

The code is as follows

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

Effect

Summarize

1. Encapsulate skeleton screen cell components
2. Configure Vue plug-ins and configure global components
3. Import the entry file and configure the UI component library plug-in
4. Use skeleton screen components to occupy place in the category list

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

mpvue realizes the linkage between left navigation and right content
Vue+Vue Router multi-level side navigation switching routing (page) implementation code

<<: Complete steps for Nginx proxy front-end and back-end separation projects with the same domain name

>>: How to install kibana tokenizer inside docker container