The skeleton screen is an old topic and there are many ways to implement it online. The Ele. me team used to have a plugin that worked well but now it’s dead. Just recently, the team upgraded the project to VUE3 and took the opportunity to implement it simply through the custom instructions of VUE.

/** * import {Directive} from "vue"; const skeleton: Directive = { mounted(el) { const { children } = el; children.forEach(element => { element.preBg = element.style.backgroundColor; if (element.offsetWidth > 1 && element.offsetHeight > 1) { element.style.backgroundColor = "#eee"; } else { element.style.backgroundColor = "transparent"; } element.children.forEach(item => { item.preDisplay = item.style.display; item.style.display = "none"; }); }); }, beforeUpdate(el) { const { children } = el; children.forEach(element => { element.style.backgroundColor = element.preBg; element.children.forEach(item => { item.style.display = item.preDisplay; }); }); }}; export default skeleton; // main.ts createApp(App) .use(store) .use(router) .directive("skeleton", skeleton) .mount("#app");Copy the code

The above is just the basic implementation, to meet some simple situations, if you have better ideas or improvements, welcome to criticize.