VarTag 变量标签组件

用于展示流程变量，支持类型标识和复制功能的标签组件。

基础用法

📝userName文本🔢count数字✓isActive布尔📦config对象📚items数组📁document文件

<template>
  <div style="display: flex; gap: 8px;">
    <!-- 文本类型 -->
    <x-var-tag :name="'userName'" :type="'string'" />
    
    <!-- 数字类型 -->
    <x-var-tag :name="'count'" :type="'number'" />
    
    <!-- 布尔类型 -->
    <x-var-tag :name="'isActive'" :type="'boolean'" />
    
    <!-- 对象类型 -->
    <x-var-tag :name="'config'" :type="'object'" />
    
    <!-- 数组类型 -->
    <x-var-tag :name="'items'" :type="'array'" />
    
    <!-- 文件类型 -->
    <x-var-tag :name="'document'" :type="'file'" />
  </div>
</template>

<script setup>
import { VarTag } from '@xto/business'
</script>

显示变量值

📝userName张三🔢count100✓isActivetrue

<template>
  <x-var-tag
    :name="'userName'"
    :type="'string'"
    :value="'张三'"
    :show-value="true"
  />
</template>

可复制

📝apiKey文本📝tokenabc123

<template>
  <x-var-tag
    :name="'apiKey'"
    :type="'string'"
    :copyable="true"
    @copy="handleCopy"
  />
</template>

<script setup>
const handleCopy = (name, value) => {
  console.log('复制变量:', name, value)
}
</script>

标签大小

📝small文本📝default文本📝large文本

<template>
  <div style="display: flex; gap: 8px; align-items: center;">
    <!-- 小尺寸 -->
    <x-var-tag :name="'small'" :size="'small'" />
    
    <!-- 默认尺寸 -->
    <x-var-tag :name="'default'" :size="'default'" />
    
    <!-- 大尺寸 -->
    <x-var-tag :name="'large'" :size="'large'" />
  </div>
</template>

隐藏类型图标

<template>
  <x-var-tag :name="'userName'" :show-type-icon="false" />
</template>

禁用状态

📝disabled文本

<template>
  <x-var-tag :name="'disabled'" :disabled="true" />
</template>

API

Props

属性	说明	类型	默认值
name	变量名称	string	''
type	变量类型	'string' | 'number' | 'boolean' | 'object' | 'array' | 'file'	'string'
value	变量值	any	undefined
showValue	是否显示值	boolean	false
copyable	是否可复制	boolean	false
disabled	是否禁用	boolean	false
size	标签大小	'small' | 'default' | 'large'	'default'
showTypeIcon	是否显示类型图标	boolean	true

Events

事件名	说明
click	点击标签时触发
copy	复制变量时触发