PointTag 状态点

使用状态点和文本表达枚举状态。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { PointTag } from "@/components/core/point-tag";

const demoProps: InstanceType<typeof PointTag>["$props"] = { type: "success" };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <PointTag v-bind="demoProps">运行中</PointTag>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { PointTag } from "@/components/core/point-tag";

Props

参数	说明	类型	默认值	必填
color	颜色	string	""	否
type	主题，当传入 color 时，会覆盖主题	"primary" | "success" | "warning" | "danger" | "info" | "error" | ""	"primary"	否
size	大小	number | string	8	否
position	位置	"left" | "right"	"left"	否
offset	偏移量	number | string	4	否
text	内容，可根据 position 配置调整位置	number | string	""	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
default	默认内容插槽。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
PointTag	导出 PointTag 供业务侧复用。	useInstall(index)

Types

PointTagProps

导出 PointTagProps 供业务侧复用。

字段	说明	类型	默认值	必填
color	颜色	string	-	否
type	主题，当传入 color 时，会覆盖主题	"primary" | "success" | "warning" | "danger" | "info" | "error" | ""	-	否
size	大小	number | string	-	否
position	位置	"left" | "right"	-	否
offset	偏移量	number | string	-	否
text	内容，可根据 position 配置调整位置	number | string	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。