useDict

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

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

import { request } from '@/api'

useDictConfigProvider({ request })

基础用法

select:

tree-select:

View Source

<script setup lang="ts">
import { ref } from 'vue'

import { useDict } from '.'

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,
}

// 模拟请求
function request({ url }: { url: keyof typeof dicMap }) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: {
          data: dicMap[url],
        },
      })
    }, 3000)
  })
}

const selectValue = ref('')
const {
  data: selectData,
  loading: selectLoading,
  selectedLabel,
  selectedItem,
} = useDict({ modelValue: selectValue, dicData })

const treeSelectValue = ref('value1-1')
const {
  data: treeSelectData,
  loading: treeSelectLoading,
  selectedItem: treeSelectedItem,
  selectedLabel: treeSelectedLabel,
} = useDict({ modelValue: treeSelectValue, request: request as any, dicUrl: '/dict/treeData' })
</script>

<template>
  select: <el-select v-model="selectValue" :data="selectData" :loading="selectLoading">
    <el-option v-for="item in selectData" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
  <br>
  <el-text>{{ selectedLabel }}</el-text>
  <br>
  <el-text>{{ selectedItem }}</el-text>
  <br>
  tree-select: <el-tree-select v-model="treeSelectValue" :data="treeSelectData" :loading="treeSelectLoading" node-key="value" />
  <br>
  <el-text>{{ treeSelectedLabel }}</el-text>
  <br>
  <el-text>{{ treeSelectedItem }}</el-text>
</template>

UseDictOptions

名称	类型	默认值	说明
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')

UseDictReturn

名称	类型	说明
data	Ref<Array>	字典项
loading	Ref<boolean>	加载状态
dictValue	Ref<boolean>	可用于绑定的字典值
selectedItem	Ref<DicItem|DicItem[]|null>	已选择的字典项(多个为数组)
selectedLabel	Ref<string|undefined>	已选择的字典项标题(多个为逗号分割)

类型定义

import type { MaybeRefOrGetter, Ref } from 'vue'
import type { AxiosInstance } from 'axios'
import type { DicItem, DicProps } from '@smallwei/avue'
import type { useRequest } from 'vue-request'

export interface UseDictOptions {
  /** 绑定值 */
  modelValue?: MaybeRefOrGetter<UseDictValue>
  /** 请求实例 */
  request?: AxiosInstance
  // /** 数据类型用于数组和字符串之间的转化 */
  // dataType?: string
  // /** 分隔符 */
  // separator?: string
  /** 数据字典属性的配置对象 */
  props?: DicProps
  /** 数据字典值 */
  dicData?: MaybeRefOrGetter<DicItem[]>
  /** 数据字典接口url地址 */
  dicUrl?: string
  /** 数据字典接口url携带请求参数 */
  dicQuery?: object
  /** 数据字典接口url携带头部参数 */
  dicHeaders?: object
  /** 数据字典接口url返回数据格式化方法 */
  dicFormatter?: (res: any) => DicItem[]
  /** 数据字典接口请求方式 */
  dicMethod?: string
}

export type UseDictValue = string | number | boolean | string[] | number[] | undefined

export interface UseDictReturn extends ReturnType<typeof useRequest<DicItem[]>> {
  selectedItem: Ref<DicItem | DicItem[] | null>
  selectedLabel: Ref<string | undefined>
}