Vue3骨架屏(Skeleton)

效果如下图:在线预览

在这里插入图片描述
在这里插入图片描述

APIs

参数说明类型默认值必传
animated是否展示动画效果booleantruefalse
button是否使用按钮占位图boolean | SkeletonButtonPropsfalsefalse
avatar是否显示头像占位图boolean | SkeletonAvatarPropsfalsefalse
input是否使用输入框占位图boolean | SkeletonInputPropsfalsefalse
image是否使用图像占位图booleanfalsefalse
title是否显示标题占位图boolean | SkeletonTitlePropstruefalse
paragraph是否显示段落占位图boolean | SkeletonParagraphPropstruefalse
loadingtrue 时,显示占位图,反之则直接展示子组件booleantruefalse

SkeletonButtonProps Type

名称说明类型必传
shape指定按钮的形状‘default’ | ‘round’ | ‘circle’false
size设置按钮的大小‘default’ | ‘small’ | ‘large’false
block将按钮宽度调整为其父宽度的选项booleanfalse

SkeletonAvatarProps Type

名称说明类型必传
shape指定头像的形状‘circle’ | ‘square’false
size设置头像占位图的大小number | ‘default’ | ‘small’ | ‘large’false

SkeletonInputProps Type

名称说明类型必传
size设置输入框的大小‘default’ | ‘small’ | ‘large’false

SkeletonTitleProps Type

名称说明类型必传
width设置标题占位图的宽度number | stringfalse

SkeletonParagraphProps Type

名称说明类型必传
rows设置段落占位图的行数number | stringfalse
width设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度number | string | Array<number|string>false

创建骨架屏组件Skeleton.vue

<script setup lang="ts">
import { computed } from 'vue'interface SkeletonButtonProps {shape?: 'default'|'round'|'circle' // 指定按钮的形状size?: 'default'|'small'|'large' // 设置按钮的大小block?: boolean // 将按钮宽度调整为其父宽度的选项
}
interface SkeletonAvatarProps {shape?: 'circle'|'square' // 指定头像的形状size?: number|'default'|'small'|'large' // 设置头像占位图的大小
}
interface SkeletonInputProps {size: 'default'|'small'|'large' // 设置输入框的大小
}
interface SkeletonTitleProps {width?: number|string // 设置标题占位图的宽度
}
interface SkeletonParagraphProps {rows?: number|string // 设置段落占位图的行数width?: number|string|Array<number|string>	// 设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度
}
interface Props {animated?: boolean // 是否展示动画效果button?: boolean|SkeletonButtonProps // 是否使用按钮占位图avatar?: boolean|SkeletonAvatarProps // 是否显示头像占位图input?: boolean|SkeletonInputProps // 是否使用输入框占位图image?: boolean // 是否使用图像占位图title?: boolean|SkeletonTitleProps // 是否显示标题占位图paragraph?: boolean|SkeletonParagraphProps // 是否显示段落占位图loading?: boolean // 为 true 时,显示占位图,反之则直接展示子组件
}
const props = withDefaults(defineProps<Props>(), {animated: true,button: false,image: false,avatar: false,input: false,title: true,paragraph: true,loading: true
})
const buttonSize = computed(() => {if (typeof props.button === 'object') {if (props.button.size === 'large') {return 40}if (props.button.size === 'small') {return 24}return 32}
})
const titleTop = computed(() => {if (typeof props.avatar === 'boolean') {return 8} else {if (typeof props.avatar.size === 'number') {return (props.avatar.size - 16) / 2} else {const topMap = {default: 8,small: 4,large: 12}return topMap[props.avatar.size || 'default']}}
})
const titleWidth = computed(() => {if (typeof props.title === 'boolean') {return '38%'} else {if (typeof props.title.width === 'number') {return props.title.width + 'px'}return props.title.width || '38%'}
})
const paragraphRows = computed(() => {if (typeof props.paragraph === 'boolean') {return 3}return props.paragraph.rows
})
const paragraphWidth = computed(() => {if (typeof props.paragraph === 'boolean') {return Array(paragraphRows.value)} else {if (Array.isArray(props.paragraph.width)) {return props.paragraph.width.map((width: number|string) => {if (typeof width === 'number') {return width + 'px'} else {return width}})} else if (typeof props.paragraph.width === 'number') {return Array(paragraphRows.value).fill(props.paragraph.width + 'px')} else {return Array(paragraphRows.value).fill(props.paragraph.width)}}
})
</script>
<template><divv-if="loading":class="['m-skeleton', {'m-skeleton-avatar': avatar, 'm-skeleton-animated': animated}]":style="`--button-size: ${buttonSize}px; --title-top: ${titleTop}px;`"><spanv-if="button":class="['u-skeleton-button',{'u-button-round': typeof button !== 'boolean' && button.shape === 'round','u-button-circle': typeof button !== 'boolean' && button.shape === 'circle','u-button-sm': typeof button !== 'boolean' && button.size === 'small','u-button-lg': typeof button !== 'boolean' && button.size === 'large','u-button-block': typeof button !== 'boolean' && button.shape !== 'circle' && button.block,}]"></span><span:class="['u-skeleton-input',{'u-input-sm': typeof input !== 'boolean' && input.size === 'small','u-input-lg': typeof input !== 'boolean' && input.size === 'large',}]" v-if="input"></span><div class="m-skeleton-image" v-if="image"><svg viewBox="0 0 1098 1024" xmlns="http://www.w3.org/2000/svg" class="m-skeleton-image-svg"><path class="u-skeleton-image-path" d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"></path></svg></div><div class="m-skeleton-header" v-if="avatar"><span:class="['u-skeleton-avatar',{'u-avatar-sm': typeof avatar !== 'boolean' && avatar.size === 'small','u-avatar-lg': typeof avatar !== 'boolean' && avatar.size === 'large','u-avatar-square': typeof avatar !== 'boolean' && avatar.shape === 'square',}]"></span></div><template v-if="!button && !image && !input"><div class="m-skeleton-content"><h3 class="u-skeleton-title" :style="{ width: titleWidth }"></h3><ul class="u-skeleton-paragraph"><li v-for="n in paragraphRows" :key="n" :style="`width: ${paragraphWidth[(n as number) - 1]};`"></li></ul></div></template></div><slot v-else></slot>
</template>
<style lang="less" scoped>
.m-skeleton {display: table;width: 100%;.u-skeleton-button {display: inline-block;vertical-align: top;background: rgba(0, 0, 0, .06);border-radius: 4px;width: 64px;min-width: 64px;height: 32px;line-height: 32px;}.u-button-sm {width: 48px;min-width: 48px;height: 24px;line-height: 24px;}.u-button-lg {width: 80px;min-width: 80px;height: 40px;line-height: 40px;}.u-button-round {border-radius: var(--button-size);}.u-button-circle {width: var(--button-size);min-width: var(--button-size);border-radius: 50%;}.u-button-block {width: 100%;}.u-skeleton-input {display: inline-block;vertical-align: top;background: rgba(0, 0, 0, 0.06);border-radius: 4px;width: 160px;min-width: 160px;height: 32px;line-height: 32px;}.u-input-sm {width: 120px;min-width: 120px;height: 24px;line-height: 24px;}.u-input-lg {width: 200px;min-width: 200px;height: 40px;line-height: 40px;}.m-skeleton-image {display: flex;align-items: center;justify-content: center;vertical-align: top;background: rgba(0, 0, 0, .06);border-radius: 4px;width: 96px;height: 96px;line-height: 96px;.m-skeleton-image-svg {width: 48px;height: 48px;line-height: 48px;max-width: 192px;max-height: 192px;.u-skeleton-image-path {fill: #bfbfbf;}}}.m-skeleton-header {display: table-cell;padding-right: 16px;vertical-align: top;.u-skeleton-avatar {display: inline-block;vertical-align: top;background: rgba(0, 0, 0, .06);width: 32px;height: 32px;line-height: 32px;border-radius: 50%;}.u-avatar-sm {width: 24px;height: 24px;line-height: 24px;}.u-avatar-lg {width: 40px;height: 40px;line-height: 40px;}.u-avatar-square {border-radius: 6px;}}.m-skeleton-content {display: table-cell;width: 100%;vertical-align: top;.u-skeleton-title {margin: 0;height: 16px;background: rgba(0, 0, 0, .06);border-radius: 4px;}.u-skeleton-paragraph {margin-top: 24px;padding: 0;li {height: 16px;list-style: none;background: rgba(0, 0, 0, .06);border-radius: 4px;&:not(:first-child) {margin-top: 16px;}&:last-child {width: 61%;}}}}
}
.m-skeleton-avatar {.m-skeleton-content {.u-skeleton-title {margin-top: var(--title-top);}.u-skeleton-paragraph {margin-top: 28px;}}
}
.m-skeleton-animated {.u-skeleton-button,.u-skeleton-input,.m-skeleton-image,.m-skeleton-header .u-skeleton-avatar,.m-skeleton-content .u-skeleton-title,.m-skeleton-content .u-skeleton-paragraph li {position: relative;z-index: 0;overflow: hidden;background: transparent;&::after {position: absolute;top: 0;left: -150%;bottom: 0;right: -150%;background: linear-gradient(90deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .15) 37%, rgba(0, 0, 0, .06) 63%);animation-name: skeleton-loading;animation-duration: 1.4s;animation-timing-function: ease;animation-iteration-count: infinite;content: "";}@keyframes skeleton-loading {0% {transform: translateX(-37.5%);}100% {transform: translateX(37.5%);}}}
}
</style>

在要使用的页面引入

<script setup lang="ts">
import Skeleton from './Skeleton.vue'
import { ref } from 'vue'const loading = ref<boolean>(false)const showSkeleton = () => {loading.value = truesetTimeout(() => {loading.value = false}, 2000)
}
const animated = ref(false)
const block = ref(false)
const size = ref('default')
const buttonShape = ref('default')
const avatarShape = ref('circle')
const sizeOptions = ref([{label: 'Default',value: 'default'},{label: 'Large',value: 'large'},{label: 'Small',value: 'small'}
])
const buttonShapeOptions = ref([{label: 'Default',value: 'default'},{label: 'Round',value: 'round'},{label: 'Circle',value: 'circle'}
])
const avatarShapeOptions = ref([{label: 'Square',value: 'square'},{label: 'Circle',value: 'circle'}
])
</script>
<template><div><h1>{{ $route.name }} {{ $route.meta.title }}</h1><h2 class="mt30 mb10">基本使用</h2><Skeleton /><h2 class="mt30 mb10">复杂的组合</h2><Skeleton avatar :paragraph="{ rows: 4 }" /><h2 class="mt30 mb10">包含子组件</h2><Button :loading="loading" @click="showSkeleton">Show Skeleton</Button><br/><br/><Skeleton :loading="loading"><div><h4>Vue Amazing UI, a design language</h4><br/><p>We supply a series of design principles, practical patterns and high quality designresources, to help people create their product prototypes beautifully and efficiently.</p></div></Skeleton><h2 class="mt30 mb10">自定义标题和段落</h2><Skeleton avatar :title="{ width: '24%' }" :paragraph="{ rows: 4, width: ['48%', '72%', '96%', '60%'] }" /><h2 class="mt30 mb10">按钮 / 输入框 / 图像 / 头像</h2><Flex :gap="32"><Flex vertical :gap="12" width="50%"><Skeleton :animated="animated" :button="{ shape: buttonShape, size: size, block: block}" /><Skeleton style="width: 200px" :animated="animated" :input="{ size: size }" /><Skeleton :animated="animated" image /><Skeleton :avatar="{ shape: avatarShape, size: size }" :paragraph="{ rows: 2 }" /></Flex><Flex vertical :gap="36" width="50%"><Space :size="32"><Space align="center">animated: <Switch v-model:checked="animated" /></Space><Space align="center">Button Block: <Switch v-model:checked="block" /></Space></Space><Space align="center">Size: <Radio :options="sizeOptions" v-model:value="size" /></Space><Space align="center">Button Shape: <Radio :options="buttonShapeOptions" v-model:value="buttonShape" /></Space><Space align="center">Avatar Shape: <Radio :options="avatarShapeOptions" v-model:value="avatarShape" /></Space></Flex></Flex></div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/14595.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SOLIDWORKS二次开发服务商 慧德敏学

SOLIDWORKS是一套三维设计软件, 采用特征建模、变量化驱动可方便地实现三维建模、装配和生成工程图。SOLIDWORKS软件本身所具有的交互方式, 可以使用户对已生成模型的尺寸、几何轮廓和相互约束关系随时进行修改, 而不需要编程。但要实现设计意义上的变量化绘图和系列化设计, 需…

java-查询字符串当中是否包含中文

文章目录 前言java-查询字符串当中是否包含中文 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来啊…

软考系统架构师一些知识点记录-1

个人随笔 (Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu) 引言 准备去参加软考的考试&#xff0c;但对一些概念掌握的还不够&#xff0c;借此机会&#xff0c;整理记录一二&#xff0c;便于自己理解掌握。 知识范围 感觉不够清晰的部分主要是第三篇和第四篇的部分。…

国际顶会认可!KaiwuDB 论文入选 ICDE 2024

导 读 近日&#xff0c;KaiwuDB 与中国人民大学合作的论文 FOSS: A Self-Learned Doctor for Query Optimizer 被数据库领域顶会The 40th IEEE International Conference on Data Engineering (ICDE 2024) 录用啦! 论文中提出了具备自学习、自诊断能力的查询优化器 FOSS&…

USB官方文档怎么下载

直接登录USB官网"https://usb.org/" 如&#xff0c;我需要查找与USB device class相关的文档 点击搜索后就能找到。 学习还是要以官方文档为主&#xff0c;博客上的介绍不可信&#xff0c;USB协议规范很重要!

商品发布功能

文章目录 1.SPU和SKU介绍1.SPU2.SKU3.两者之间的关系 2.完成商品发布界面1.组件引入1.commoditylaunch.vue 引入到 src/views/modules/commodity下2.multiUpload.vue 引入到 src/components/upload/multiUpload.vue 2.创建菜单1.创建目录2.创建菜单&#xff0c;注意菜单路由要匹…

go语言中同一for循环体内的多个初始变量和多个自增变量用法示例

在go语言的for循环体中&#xff0c;我们可以同时初始多个变量&#xff0c; 也可以同时多多个变量进行自增/自减操作&#xff0c; 用法如下&#xff1a; for 后面的多个初始化变量使用的是逗号分隔的批量赋值操作&#xff0c;多个变量自增自减使用 加减运算符和逗号分隔 字符…

MySQL之性能剖析和Schema与数据类型优化(一)

性能剖析总结 1.定义性能最有效的方法是响应时间2.如果无法测量就无法有效地优化&#xff0c;所以性能优化工作需要基于高质量、全方位及完整的响应时间测量3.测量的最佳开始点是应用程序&#xff0c;而不是数据库。即使问题出在底层的数据库&#xff0c;借助良好的测量也可以…

C++系列-友元

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 我们在之前的文章有提到友元&#xff0c;我们先来看下面的这段包含了友元的代码&#xff1a; ​​#define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace…

CLIP论文学习

学习来自B站bryanyzhu

jdk17安装教程详细(jdk17安装超详细图文)

2021年9月14日JDK17 发布&#xff0c;其中不仅包含很多新语言功能&#xff0c;而且与旧版 JDK 相比&#xff0c;性能提升也非常明显。与之前 LTS 版本的 JDK 8 和 JDK 11 相比&#xff0c;JDK17 的性能提升尤为明显&#xff0c;本文将教你如何安装 相比于JDK1.8&#xff0c;JD…

虚拟机网络设置为桥接模式后未显示网络

本方法为&#xff0c;VMware配置正确&#xff0c;但在尝试其他办法后未能成功解决的人提供一种方法 本机的虚拟机使用NAT模式正常使用 但是使用桥接模式后重启&#xff0c;未发现虚拟机内网络设置,详见下图&#xff1a; 使用 ifconfig 查看网络详情 发现没有ens33接口 查看硬…

双非本科,逆袭中大厂的 Java 学习路线

从零基础入门 Java&#xff0c;到最后秋招上岸&#xff0c;笔者也是花费了不少的经历&#xff0c;也走了很多弯路。这一篇文章会记录下真正有用的学习路线。 为什么要强调真正有用&#xff1f;网上的很多所谓从入门到求职&#xff0c;推荐的路线都超级长&#xff0c;零基础的同…

LeetCode198:打家劫舍

题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个房屋存…

【学习笔记】Windows GDI绘图(六)图形路径GraphicsPath详解(中)

上一篇【学习笔记】Windows GDI绘图(五)图形路径GraphicsPath详解(上)介绍了GraphicsPath类的构造函数、属性和方法AddArc添加椭圆弧、AddBezier添加贝赛尔曲线、AddClosedCurve添加封闭基数样条曲线、AddCurve添加开放基数样条曲线、基数样条如何转Bezier、AddEllipse添加椭圆…

华为校招机试 - 最久最少使用缓存(20240508)

题目描述 无线通信移动性需要在基站上配置邻区(本端基站的小区 LocalCell 与周边邻基站的小区 NeighborCelI 映射)关系, 为了能够加速无线算法的计算效率,设计一个邻区关系缓存表,用于快速的通过本小区 LocalCell 查询到邻小区 NeighborCell。 但是缓存表有一定的规格限…

代码随想录-Day07

454. 四数相加 II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < n nums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入&#x…

系统磁盘高级管理、lvm例子、创建pv、创建VG、创建lv、磁盘扩展

LVM&#xff1a; 逻辑卷&#xff0c;动态调整分区大小&#xff0c;扩展性好 创建pv pvcreate &#xff1a; 将实体 partition 创建成为 PV &#xff1b; pvscan &#xff1a; 搜寻目前系统里面任何具有 PV 的磁盘&#xff1b; pvdisplay &#xff1a; 显示出目前系统上面…

GNSS仿真测试之三种常用坐标系与转换

作者介绍 在当今的全球导航卫星系统&#xff08;GNSS&#xff09;技术领域&#xff0c;仿真测试是评估和验证GNSS接收机性能的关键环节&#xff0c;全球导航卫星系统&#xff08;GNSS&#xff09;仿真测试是确保GNSS接收机和导航解决方案在实际部署前能够正确、可靠地工作的关键…

【git】学习记录: 贮藏功能

Git 贮藏修改是一种临时存储工作目录中已经修改但尚未提交的更改的机制。通过贮藏修改&#xff0c;你可以将当前的工作目录状态保存起来&#xff0c;以便你可以在之后的时间点重新应用这些更改&#xff0c;或者在不同的分支间切换时避免冲突。 要使用 Git 贮藏修改&#xff0c…