Loading 标签

区域加载状态。

基础用法

你可以包裹任何区域，使用 v-model 控制 loading 效果的隐藏。

控制台

加载状态：true

查看代码

<template>
	<demo-container>
		<div style="padding: 15px 0">
			Control：<gov-switch v-model="loading" />
		</div>
		<gov-loading v-model="loading">
			<gov-blockquote>
				示例文字：局部的loading加载效果有助于缓解用户的焦虑，一个好的交互网页通常都具备良好的用户体验。modelValue绑定一个布尔值，能够控制加载状态的显示隐藏。也可以根据
				loading
				插槽来自定义加载状态。局部的loading加载效果有助于缓解用户的焦虑，一个好的交互网页通常都具备良好的用户体验。modelValue绑定一个布尔值，能够控制加载状态的显示隐藏。也可以根据
				loading 插槽来自定义加载状态。
			</gov-blockquote>
		</gov-loading>
		<template #console>加载状态：{{ loading }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const loading = ref(true);
</script>

加载样式

通常可以使用 loadingText 和 loadingBackground 来定义不同的背景色和文字。

控制台

加载状态：true

查看代码

<template>
	<demo-container>
		<div style="padding: 15px 0">
			Control：<gov-switch v-model="loading" />
		</div>
		<gov-loading
			v-model="loading"
			loadingText="你看我加载的快不快..."
			loadingBackground="rgba(64, 158, 255, 0.5)"
		>
			<gov-blockquote>
				示例文字：局部的loading加载效果有助于缓解用户的焦虑，一个好的交互网页通常都具备良好的用户体验。modelValue绑定一个布尔值，能够控制加载状态的显示隐藏。也可以根据
				loading
				插槽来自定义加载状态。局部的loading加载效果有助于缓解用户的焦虑，一个好的交互网页通常都具备良好的用户体验。modelValue绑定一个布尔值，能够控制加载状态的显示隐藏。也可以根据
				loading 插槽来自定义加载状态。
			</gov-blockquote>
		</gov-loading>
		<template #console>加载状态：{{ loading }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const loading = ref(true);
</script>

自定义

控制台

加载状态：true

查看代码

<template>
	<demo-container>
		<div style="padding: 15px 0">
			Control：<gov-switch v-model="loading" />
		</div>
		<gov-loading v-model="loading">
			<gov-blockquote>
				{{ content }}
			</gov-blockquote>
			<template #loading>
				<div class="custom-loading">
					<div class="custom-loading__animation">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</div>
				<div class="custom-loading__text">正在努力狂奔...</div>
			</template>
		</gov-loading>
		<template #console>加载状态：{{ loading }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const loading = ref(true);
const content = Array.from(
	{ length: 20 },
	() => "你也可以自定义一些漂亮的loading，有很多效果很不错。",
).join("");
</script>
<style lang="scss" scoped>
@keyframes load {
	0%,
	100% {
		height: 40px;
		margin: 0 3px;
		background: lightgreen;
	}
	50% {
		height: 70px;
		margin: -15px 3px;
		background: lightblue;
	}
}
.custom-loading {
	position: relative;

	&__text {
		padding-top: 20px;
	}

	&__animation {
		width: 80px;
		height: 40px;
		margin: 0 auto;
		span {
			display: inline-block;
			width: 8px;
			height: 100%;
			border-radius: 4px;
			margin: 0 3px;
			background: lightgreen;
			animation: load 1s ease infinite;
			&:nth-child(2) {
				animation-delay: 0.2s;
			}
			&:nth-child(3) {
				animation-delay: 0.4s;
			}
			&:nth-child(4) {
				animation-delay: 0.6s;
			}

			&:nth-child(5) {
				animation-delay: 0.8s;
			}
		}
	}
}
</style>

Attributes

属性名	说明	类型	可选值	默认值
modelValue	控制加载状态的显示与隐藏	Boolean	true, false	false
loadingText	加载时显示的文本	String	—	"加载中..."
loadingBackground	加载时的背景样式	String	—	"rgba(0, 0, 0, 0.5)"

Slots

插槽名	说明
default	用于放置加载状态以外的内容，例如文本或 HTML 结构。
loading	用于自定义加载中的图标和文本