@corgicoding-el/dict
TypeScript icon, indicating that this package has built-in type declarations

2.1.1 • Public • Published

@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>

Package Sidebar

Install

npm i @corgicoding-el/dict

Weekly Downloads

11

Version

2.1.1

License

Apache-2.0

Unpacked Size

117 kB

Total Files

14

Last publish

Collaborators

  • charleschan2016