# ZnDict 字典组件

字典组件，用于显示字典值的标签

因为想做成通用的，可以在不同的系统直接快速的进行应用，所以这里使用常量配置的方式进行，后续会扩展支持

支持环境：onemap,onemap-serve

# label组件

用来展示使用的

# 基础用法

类型的格式：value|label;value|label;...

是

<zn-dict-label type="1|是;0|否;" :value="'1'"></zn-dict-label>

Copy

# 不同的格式风格

文本类型（默认风格）

是

tag类型

是

<div>
    文本类型 （默认风格）
    <zn-dict-label type="1|是;0|否;" :value="'1'"></zn-dict-label>
    tag类型
    <zn-dict-label type="1|是;0|否;" :value="'1'" show-type="tag"></zn-dict-label>
</div>

Copy

# 颜色配置

支持动态颜色，可以根据值不同，显示不同的颜色

传递的是一个函数，参数是值

是

如果传递的是一个字符串类型，那就只能是一个颜色 color="'gary'"

是

<div>
    <p>传递的是一个函数，参数是值</p>
    <zn-dict-label type="1|是;0|否;" :value="'1'" :color="value === '1' ? 'green' : 'red'"></zn-dict-label>
    <zn-dict-label type="1|是;0|否;" :value="'1'" :color="value != '1' ? 'green' : 'red'"></zn-dict-label>
    <p>如果传递的是一个字符串类型，那就只能是一个颜色 color="'gary'"</p>
    <zn-dict-label type="1|是;0|否;" :value="'1'" :color="'gary'"></zn-dict-label>
</div>

Copy

# 支持多值形式

可以使用数组，或者逗号分隔的字符串

是, 否

<zn-dict-label type="1|是;0|否;" :value="['1','0']"></zn-dict-label>
<zn-dict-label type="1|是;0|否;" value="1,0"></zn-dict-label>

Copy

# 选择组件

用来做选择，支持双向绑定

# 基础用法

类型的格式：value|label;value|label;...

值内容：1 123 456

<template>
    <div>
        <zn-dict-select type="1|是;0|否;" v-model="value"></zn-dict-select>
        值内容：{{value}} 123 456
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: '1'
            }
        }
    }
</script>

Copy

# Props 通用的

参数	说明	类型	可选值	默认值
value/v-model	绑定值	sting,number
type	字典的参数值	string

← ZnDescriptions 描述组件 ZnDynamicRender 动态渲染组件 →