在区分Vue 2的Element UI和Vue 3的Element Plus中的Skeleton骨架屏组件时,我们需要注意到Element UI本身并不直接提供Skeleton组件,而Element Plus则直接提供了这一组件。因此,我将分别介绍Element Plus中的Skeleton组件以及如何在Vue 2项目中实现类似功能的骨架屏。
Vue 3与Element Plus的Skeleton组件
属性
Element Plus的Skeleton组件提供了以下属性:
animated:类型为boolean,默认为false。是否应用动画效果。
rows:类型为number,默认为1。骨架屏的行数。
loading:类型为boolean,默认为true。是否显示骨架屏。
avatar:类型为boolean,默认为false。是否显示头像占位符。
avatar-shape:类型为string,可选值为’circle’或’square’,默认为’circle’。头像占位符的形状。
avatar-size:类型为string,如’large’、‘medium’、‘small’,定义头像占位符的大小。
title:类型为boolean,默认为false。是否显示标题占位符。
title-width:类型为string,如’50%',定义标题占位符的宽度。
logo:类型为boolean,默认为false。是否显示Logo占位符。
row-width:类型为number[]或string[],如[100, ‘50%’],定义每行骨架屏的宽度。
事件
Element Plus的Skeleton组件本身不提供特定的事件。
方法
由于Skeleton组件主要用于页面加载时的占位显示,通常不需要调用特定的方法。但你可以通过Vue的响应式系统来控制Skeleton组件的显示与隐藏,例如结合Vue的v-if或v-show指令。
使用案例
vue
Vue 2与Element UI的