Vue3 project encapsulation side navigation text skeleton effect component-global encapsulation, for your reference, the specific contents are as follows PurposeWhen 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. - 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 code1. 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.jsimport { 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 componentsWhen 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 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:
|
>>: How to install kibana tokenizer inside docker container
Solution: Directly in the directory where you dow...
There are many tags in XHTML, but only a few are ...
Maybe you are using include files here, which is u...
Tomcat is a web server software based on Java lan...
This article mainly introduces the typing effect ...
Table of contents 1. Form events 2. Mouse events ...
This article example shares the specific code of ...
Table of contents What is JSI What is different a...
This article shares the specific code of js imita...
The computer system has been reinstalled, and the...
In this article, the blogger will take you to lea...
MySQL x64 does not provide an installer, does not...
Goal: Create a square whose side length is equal ...
1. Installation version details Server: MariaDB S...
Docker official documentation: https://docs.docke...