Skip to content

DictTag Component

Display dictionary data in tag component form
  • Encapsulated based on NTag

Basic Usage ​

vue
vue
<template>
  <!-- Single Number value -->
  <DictTag :options="gender" :value="1" />

  <!-- Single String value -->
  <DictTag :options="gender" value="2" />

  <!-- Array value -->
  <DictTag :options="gender" :value="[0, 1]" />
  <DictTag :options="gender" :value="['1', '2']" />

  <!-- String value with separator -->
  <DictTag :options="gender" value="0,1,2" />

  <!-- String value with custom separator -->
  <DictTag :options="gender" value="0-1-2" separator="-" />
</template>

<script lang="ts" setup>
import { useDict } from "@/hooks";

const { gender } = useDict("gender");
</script>

Page Rendering ​

Male
Single Number value
Female
Single String value
Confidential
Male
Male
Female
Array value
Confidential
Male
Female
String value with separator
Confidential
Male
Female
String value with custom separator

Props ​

NameTypeRequiredDefaultDescription
optionsDictData.Option[]YesDictionary data list
valueString | Number | String[] | Number[]YesBound value
roundBooleanNofalseWhether rounded
borderedBooleanNofalseWhether to show border
separatorStringNo,Separator

Contributors

Changelog

Released under the MIT License