preface

There are many times when we browse the web, because of network reasons, there is no way to see the content of the web page in the first time, so the skeleton screen can have a general display of the web page. Can also be very friendly to let the user feel that the web page is loading, let’s see how to achieve the skeleton screen effect

Why skeleton screen?

  • When the user just opened the page, the background has not returned the data, the page can not render.
  • If the user happens to have a bad network, if nothing is displayed on the page, the user will most likely simply opt out.
  • The skeleton screen acts as a placeholder, letting the user know that something is being loaded.

Two, how to package?

Register as a global component by plug-in.

Component libraries like elementUI and Vant have skeleton screens for those who don’t understand. Vant’s official website: Element’s Skeleton Screen (mobile device)

1. Prepare components

Create a new skeleton.vue file under SRC/Components (example) :

<template>
  <div class="skeleton" :style="{width,height}" :class="{shan:animated}"> <! -- 1 box --> <div class="block" :style="{backgroundColor:bg}"></div> <! </div> </template> <script>export default {
  name: 'Skeleton', // to dynamically set the height, width, background color, whether or not to flickerbg: {
      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>Copy the code

2. Register as a component

Create a new index.js file under SRC/Components

If there are other global components or functions, you can also register them in the install function

import Skeleton from './library/skeleton'
// 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
export default {
  install (app) {
    app.component(Skeleton.name, Skeleton)
  }
}

Copy the code

3. Register as a plug-in

The code to register as a global plug-in in main.js is as follows (example) :

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

+import myUI from './components'

+createApp(App).use(store).use(router).use(myUI).mount('#app')

Copy the code

Three, how to use?

1. Use demonstration

In the.vue ending file

The code is as follows (example) :

Just pass in the parameters required by the component

<template>
	<skeleton width="50px" height="20px" animated bg="#999"/>
</template>

<script>
export default {
  name: 'App',
  setup() {
  
  }
}
</script>

Copy the code

Results demonstrate

2. Application scenarios

You can loop it where you need it. After the background data is returned, the skeleton screen component can be replaced.

Nuggets PC side effect

conclusion

Alas ~