@corgicoding-el/dict

为 @corgicoding/web-quick-start 工程模板设定的远程字典组件，具备本地缓存功能

绑定依赖

1. @corgicoding/web-types
   • NormalizedError: 统一错误返回
   • NormalizedResponse: 统一接口返回
2. @corgicoding/axios-hook
   • useService: 获取当前 axios 实例

安装

安装工程到本地，并按需使用或全局使用

前置依赖

• element-plus
• axios
• @vueuse/core
• vue (3.x)

如果没有以上依赖，工程执行以下命令进行安装

pnpm install element-plus vue @vueuse/core axios -S

安装

使用 pnpm 下载

pnpm install @corgicoding-el/dict -S

使用

每次请求会访问当前 sessionStorage 缓存，查看当前访问字段是否缓存，是则取缓存内容，否则请求接口数据。

页面缓存仅当前标签页有效

props

export interface DictProps {
  dictCode: string; // 字典编码 或 表名
  valueKey?: string; // 若dictCode为表名，则需传入返回option取得value 数据库表头key
  textKey?: string; // 若dictCode为表名，则需传入返回option显示label 数据库表头key
  filter?: string; // 若dictCode为表名，则可输入过滤方法，例如 username='admin'
  url?: string; // 修改请求url
  modelValue: any; // 绑定值
  componentOptions?: any; // 配置默认element-plus组件参数
}

暴露参数

defineExpose({
  reload: forceReloadDict // 强制刷新字典缓存加载
});

用例参考

<script setup lang="ts">
import { computed } from 'vue';
import { DictSelect } from '@corgicoding-el/dict';

const selectValue = ref();
</script>

<template>
  <DictSelect v-model="selectValue" dict-code="rule_conditions"></DictSelect>
</template>