# 字典标签组件

> 字典键值请使用整型字符,前端会转换为Number

> 字典数据在一个app的生命周期中只会从服务器获取一次,可以反复使用



## 直接使用c-tag

```html
<!-- 最简单使用 -->
<c-tag name="sys_oper_type" value="3" />
<!-- 边框效果 -->
<c-tag name="sys_oper_type" value="4" border />
<!-- 绑定字典键值变量 -_-|| -->
<c-tag name="sys_oper_type" :value="5" border />
<!-- 可设置的css变量,默认:0 -->
<c-tag name="sys_oper_type" value="6" border style="--margin: 0 .5rem;" />
<!-- 使用默认插槽 -->
<c-tag name="sys_oper_type" value="7" border style="--margin: 0 .5rem;">
    默认插槽
</c-tag>
<!-- 使用默认作用域插槽 -->
<c-tag name="sys_oper_type" value="8" border style="--margin: .5rem;">
    <template #default="{ dict }">
        {{ dict }}
    </template>
</c-tag>
<c-tag name="sys_oper_type" value="9" border style="--margin: .5rem;">
    <template #default="{ dict }">
        当前操作:{{ dict?.label }}
    </template>
</c-tag>
```



## 获取字典数据

### script前提

```js
import { useDictStore } from '@/store'
const dictStore = useDictStore();
```

### 获取某个值的字典数据

```html
<view>{{ dictStore.get("sys_oper_type", 3) }}</view>
<view :class="['w-' + dictStore.get('sys_oper_type', 4)?.type]">{{ dictStore.get("sys_oper_type", 4)?.label }}
</view>
```

**字典数据格式:**

```json
{
    "label": "生成代码",
    "value": 8,
    "type": "warning"
}
```



### 获取字典数据列表

```html
<view><text v-for="(item,i) in dictStore.list('sys_oper_type')" :key="i" style="margin: 0 .2rem;">{{ item.value }}={{ item.label }}</text></view>
```

### 在script中使用

> 强度获取的先后顺序(在script中先获取字典,再操作字典数据)的情况下,建议使用异步方法:**getAsync,listAsync**

```js
const label = ref('');
//不建议
// label.value = dictStore.get('sys_oper_type',8)?.label;
//建议使用异步方法,getAsync,listAsync
dictStore.getAsync('sys_oper_type',8).then(data=>{
	label.value = data?.label;
});
dictStore.listAsync('sys_oper_type').then(list=>{
    // list is Array
    // doSomething
})
```

