VDict

基于useDict的字典组件

使用前全局注入请求实例，就不用每次都传入请求实例了

// main.ts
import { useDictConfigProvider } from '@yusui/composables'

import { request } from '@/api'

useDictConfigProvider({ request })

基础用法

Single Value:
request:

radio:

select:

switch:

text:
refDicText:
Multiple Value:
request:

checkbox:

multile select:

multiple text:

Tree Single Value:
request:

cascader:

tree-select:

tree text:

Tree Multiple Value:
request:

multiple cascader:

multiple tree-select:

multiple tree text:

View Source

<script setup lang="ts">
import { ref } from 'vue'
import { useDictConfigProvider } from '@yusui/composables'

const single = ref('value1')
const multiple = ref([])
const singletree = ref('')
const multipletree = ref([])

const switchValue = ref('')

const dicData = [
  {
    label: 'label1',
    value: 'value1',
  },
  {
    label: 'label2',
    value: 'value2',
  },
]
const treeData = [
  {
    label: 'label1',
    value: 'value1',
    children: [
      { label: 'label1-1', value: 'value1-1' },
      { label: 'label1-2', value: 'value1-2' },
    ],
  },
  {
    label: 'label2',
    value: 'value2',
    children: [
      { label: 'label2-1', value: 'value2-1' },
      { label: 'label2-2', value: 'value2-2' },
    ],
  },
]

const dicMap = {
  '/dict/dicData': dicData,
  '/dict/treeData': treeData,
}

// 注入请求实例
useDictConfigProvider({ request: request as any })
// 模拟请求
function request({ url }: { url: keyof typeof dicMap }) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: {
          data: dicMap[url],
        },
      })
    }, 1000)
  })
}

const refDicValue = ref('value1')
const refDicData = ref<any[]>([])
setTimeout(() => {
  refDicData.value = dicData
}, 3000)
</script>

<template>
  Single Value:
  <br>
  request: <VDict v-model="single" dic-url="/dict/dicData" />
  <br>
  radio: <VDict v-model="single" :dic-data="dicData" type="radio" />
  <br>
  select: <VDict v-model="single" :dic-data="dicData" type="select" />
  <br>
  switch: <VDict v-model="switchValue" :dic-data="dicData" type="switch" />
  <br>
  text: <VDict :model-value="single" :dic-data="dicData" type="text" />
  <br>
  refDicText: <VDict :model-value="refDicValue" :dic-data="refDicData" type="text" />

  <br>
  Multiple Value:
  <br>
  request: <VDict v-model="multiple" dic-url="/dict/dicData" multiple />
  <br>
  checkbox: <VDict v-model="multiple" :dic-data="dicData" type="checkbox" multiple style="display:inline-block" />
  <br>
  multile select: <VDict v-model="multiple" :dic-data="dicData" type="select" multiple />
  <br>
  multiple text: <VDict :model-value="multiple" :dic-data="dicData" type="text" multiple />
  <br>

  <br>
  Tree Single Value:
  <br>
  request: <VDict v-model="singletree" dic-url="/dict/treeData" type="tree-select" />
  <br>
  cascader: <VDict v-model="singletree" :dic-data="treeData" type="cascader" :props="{ emitPath: false }" :show-all-levels="false" />
  <br>
  tree-select: <VDict v-model="singletree" :dic-data="treeData" type="tree-select" />
  <br>
  tree text: <VDict :model-value="singletree" :dic-data="treeData" type="text" />
  <br>

  <br>
  Tree Multiple Value:
  <br>
  request: <VDict v-model="multipletree" dic-url="/dict/treeData" type="tree-select" multiple show-checkbox />
  <br>
  multiple cascader: <VDict v-model="multipletree" :dic-data="treeData" type="cascader" multiple :props="{ emitPath: false }" :show-all-levels="false" />
  <br>
  multiple tree-select: <VDict v-model="multipletree" :dic-data="treeData" type="tree-select" multiple show-checkbox />
  <br>
  multiple tree text: <VDict :model-value="multipletree" :dic-data="treeData" type="text" multiple />
  <br>
</template>

VDictProps

名称	类型	默认值	说明
v-model			绑定值
type	VDictType	'select'	组件类型
multiple	Boolean		是否多选
button			radio,checkbox是否显示为按钮
border			radio,checkbox是否显示边框
request	AxiosInstance		请求实例，可通过useDictConfigProvider全局注入
props	DicProps		字典属性配置
dicData	Array		静态字典项
dicUrl	String		字典请求接口地址
dicQuery	Object		字典请求参数
dicHeaders	Object		字典请求头
dicFormatter	(res) => Array		字典请求返回数据格式化
dicMethod	String	'get'	字典请求方式

DicProps

名称	类型	默认值	说明
label	String	'label'	字典标题属性名
value	String	'value'	字典值属性名
children	String	'children'	字典子项属性名
disabled	String	'disabled'	字典禁用项属性名
res	String	'data'	字典请求返回的数据结构(如'data.records')

类型定义

import type { UseDictOptions } from '@yusui/composables'

export type VDictType = 'cascader' | 'checkbox' | 'radio' | 'select' | 'switch' | 'tree-select' | 'text'

export interface VDictProps extends UseDictOptions {
  /** 绑定值 */
  modelValue?: any
  // modelValue?: UseDictValue
  /** 组件类型 */
  type?: VDictType
  /** 是否多选 */
  multiple?: boolean
  /** radio,checkbox是否显示为按钮 */
  button?: boolean
  /** radio,checkbox是否显示边框 */
  border?: boolean
}