【区分vue2和vue3下的element UI Skeleton 骨架屏组件,分别详细介绍属性,事件,方法如何使用,并举例】

在区分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的骨架屏实现

由于Element UI本身不提供Skeleton组件,但你可以通过自定义组件或使用第三方库来实现类似的功能。以下是一个自定义骨架屏组件的简化示例:

属性、事件、方法

由于是自定义组件,你可以根据需要定义属性、事件和方法。

例如,你可以定义一个loading属性来控制是否显示骨架屏,一个animate属性来控制是否应用动画效果。

使用案例

vue

在这个例子中,我们创建了一个自定义的骨架屏组件,它接受loading和rows作为属性。当loading为true时,显示骨架屏;当loading为false时,显示真实内容。你可以根据需要扩展这个组件,添加更多的属性和样式。

相关推荐
高级程序源11 小时前
SSM仓储管理系统31582-计算机课程设计、毕业设计
vue.js·python·mysql·小程序·flask·课程设计
WarPigs11 小时前
UI路径配置SO>字典json工作流
ui·unity
骑着蜗牛撵大象32711 小时前
豆包 Seed 驱动的记账智能体:从拍票抽取到月报生成的全链路落地记录
java·前端·javascript·结构化输出·豆包seed·多模态识别·记账系统
溪语流沙11 小时前
【Web全栈进阶】前端世界观:现代工具链与框架为什么存在
前端·javascript·vue.js
stevenzqzq11 小时前
mvi理解2-ui状态和业务状态
ui
kyriewen11 小时前
我逐个测了 JSON.stringify 的 7 个坑:第 1 个就在丢数据
前端·javascript·程序员
song50112 小时前
React Native for OpenHarmony 实战:三方库 react-native-ratings 的鸿蒙化适配指南
javascript·react native·react.js·分类·harmonyos
WeiXin_DZbishe12 小时前
基于微信小程序的本地闲置物品交易平台-计算机毕设 附源码【课程设计】26825
vue.js·spring boot·python·微信小程序·架构·php·课程设计
朱包林12 小时前
iTerm2终端配置指南
linux·javascript·python·云原生·容器·kubernetes·云计算
高级程序源13 小时前
springboot本地生活服务平台33399-计算机课程设计、毕业设计
vue.js·spring boot·python·mysql·小程序·flask·课程设计