vue-dictionary

VueDictionary

一个后台管理系统通用的字典数据组件
文档

安装

npm i vue-dictionary
# or
yarn add vue-dictionary

使用

全部引入

import { createApp } from "vue";
import App from "./App.vue";
import VueDictionary from "vue-dictionary";

const app = createApp(App);

// global config
const getDict = (type: string) => axios.get("/api/dict/" + type);
app.use(VueDictionary, {
  label: "title",
  value: "id",
  children: "child",
  request: getDict,
  res: "res.data"
});

app.mount("#app");

手动引入

<!-- App.vue -->
<template>
  <v-dict type="select" :data="[]"></v-dict>
  <!-- Same As -->
  <dict-select :data="[]"></dict-select>
</template>
<script setup>
  import { VDict, DictSelect } from "vue-dictionary";
</script>

Volar 支持

在 tsconfig.json 中为 Volar 添加类型定义

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["vue-dictionary/global"]
  }
}