VueDictionary

Dict

Basic

View source
<template>
  <v-dict v-model="value" :data="dictData"></v-dict>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref("");
const dictData = [
  { label: "apple", value: "1" },
  { label: "banana", value: "2" },
  { label: "cherry", value: "3" }
];
</script>

Promise Data

View source
<template>
  <v-dict v-model="value" :data="dictDataPromise"></v-dict>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref("");
const dictDataPromise = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        data: [
          { label: "apple", value: "1" },
          { label: "banana", value: "2" },
          { label: "cherry", value: "3" }
        ]
      });
    }, 1000);
  });
};
</script>

Dict Option

View source
<template>
  <v-dict v-model="value" :data="dictDataPromise" :option="dictOption"></v-dict>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref("");
const dictOption = {
  label: "title",
  value: "id",
  res: "res"
};
const dictDataPromise = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { title: "apple", id: "1" },
        { title: "banana", id: "2" },
        { title: "cherry", id: "3" }
      ]);
    }, 1000);
  });
};
</script>

Type



View source
<template>
  <v-dict v-model="type" type="radio" :data="typeDict" button @change="typeChange"></v-dict>
  <br />
  <br />
  <v-dict v-model="value" :type="type" :data="dictData"></v-dict>
</template>

<script setup lang="ts">
import type { DictValue } from "~/types";

import { ref } from "vue-demi";

const value = ref<string | string[]>("1");
const type = ref("select" as const);
const dictData = [
  { label: "apple", value: "1" },
  { label: "banana", value: "2" },
  { label: "cherry", value: "3" }
];

const typeDict = [
  { label: "select", value: "select" },
  { label: "radio", value: "radio" },
  { label: "checkbox", value: "checkbox" },
  { label: "switch", value: "switch" },
  { label: "cascader", value: "cascader" },
  { label: "tree-select", value: "tree-select" },
  { label: "text", value: "text" }
];

function typeChange(val: DictValue) {
  if (val === "text") {
    value.value = ["1", "2"];
  } else {
    value.value = val === "checkbox" ? ["1", "2"] : "1";
  }
}
</script>

Props

除了支持 type 对应的组件参数和事件外，还包括以下参数

参数说明类型可选值默认值
v-model绑定值string / number / boolean / array--
type组件类型stringselect / radio / checkbox / switch / cascader / cascader-panel / textselect
data字典数据，可以是数组或返回 Promise 的函数array / function(params?)-option.request
option字典配置，详见下方说明---
code缓存字典数据的 key，并作为 data(params)的默认参数string-
button当 type 为 radio 或 checkbox 时，是否显示按钮boolean-
border当 type 为 radio 或 checkbox 时，是否显示边框boolean-

Option

参数说明类型可选值默认值
label字典数据的 label 键名string-label
value字典数据的 value 键名string-value
children字典数据的 children 键名string-children
res字典 Promise 函数返回数据的格式string-res.data
params字典 Promise 函数的参数---
request当组件 props.data 为 undefined 时，作为默认的字典 Promise 函数，---

Events

事件名说明回调参数
change选中值发生变化时触发，回调参数为选择的字典项(单选)或字典项数组(多选)(item:DictItem|DictItem[])