Empty 空状态

基础用法

直接使用该组件。

查看代码

<template>
	<demo-container>
		<gov-empty />
	</demo-container>
</template>

控制大小

通过 size 修改图片大小；通过 description 修改描述文字。

控制台

 大小:100px 

查看代码

<template>
	<demo-container>
		大小：<gov-input-number
			v-model="size"
			:step="10"
			:min="30"
			:max="200"
			suffix="px"
			controls
		/>
		<br />
		<br />
		描述：<gov-input v-model="description" />
		<hr />
		<gov-empty :size="size" :description="description" />
		<template #console> 大小:{{ size }}px </template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const size = ref(100);
const description = ref("暂无内容");
</script>

自定义

自定义图片和文本。

查看代码

<template>
	<demo-container>
		<gov-empty>
			<svg
				t="1730957935570"
				class="icon"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="3909"
				width="48"
				height="48"
			>
				<path
					d="M11.696 11.696a39.92 39.92 0 0 1 56.456 0l187.92 187.92h606.24c88.056 0 159.696 71.632 159.696 159.68v103.8a39.92 39.92 0 0 1-79.848 0V359.304c0-44.032-35.816-79.84-79.84-79.84h-526.4l463.088 463.088h63.304c44.032 0 79.848-35.816 79.848-79.84a39.92 39.92 0 1 1 79.84 0c0 82.736-63.248 150.96-143.928 158.896l132.24 132.24a39.92 39.92 0 1 1-56.456 56.464L11.696 68.16a39.92 39.92 0 0 1 0-56.456z m69.224 329.008a39.92 39.92 0 1 1 79.304 9.248c-0.352 3.064-0.536 6.208-0.536 9.352V411.2a39.92 39.92 0 0 1-39.92 39.92H79.84v119.768h39.92a39.92 39.92 0 0 1 39.92 39.92v51.904c0 44.024 35.816 79.84 79.84 79.84h329.36a39.92 39.92 0 1 1 0 79.84h-329.36c-88.048 0-159.68-71.632-159.68-159.68V650.72H68.44C30.704 650.728 0 620.032 0 582.296V439.712c0-37.736 30.704-68.432 68.44-68.432H79.84v-11.976c0-6.216 0.36-12.48 1.072-18.6z"
					p-id="3910"
					fill="#dbdbdb"
				></path>
			</svg>
			<div>没有电了！</div>
		</gov-empty>
	</demo-container>
</template>

Attributes

属性名	说明	类型	可选值	默认值
size	图标大小	Number	—	40
description	描述文字	String	—	"暂无数据"

Slots

插槽名	说明	作用域插槽	内容
default	默认插槽，用于自定义内容	否	可以放置自定义的内容，如文本、图标或其他 HTML 结构。