- 基于 NTag 封装
基本使用
vue
<template>
<!-- 单个 Number 类型的 value -->
<DictTag :options="gender" :value="1" />
<!-- 单个 String 类型的 value -->
<DictTag :options="gender" value="2" />
<!-- Array 类型的 value -->
<DictTag :options="gender" :value="[0, 1]" />
<DictTag :options="gender" :value="['1', '2']" />
<!-- String 类型的 value 使用分隔符 -->
<DictTag :options="gender" value="0,1,2" />
<!-- String 类型的 value 自定义分隔符 -->
<DictTag :options="gender" value="0-1-2" separator="-" />
</template>
<script lang="ts" setup>
import { useDict } from "@/hooks";
const { gender } = useDict("gender");
</script>页面渲染
男
单个 Number 类型的 value 女
单个 String 类型的 value保密
男
男
女
Array 类型的 value保密
男
女
String 类型的 value 使用分隔符保密
男
女
String 类型的 value 自定义分隔符Props
| 名称 | 类型 | 必传 | 默认值 | 说明 |
|---|---|---|---|---|
| options | DictData.Option[] | 是 | 字典数据列表 | |
| value | String | Number | String[] | Number[] | 是 | 绑定值 | |
| round | Boolean | 否 | false | 是否圆角 |
| bordered | Boolean | 否 | false | 是否显示边框 |
| separator | String | 否 | , | 分隔符 |
nuyoah