VueDictionary

Checkbox

Basic

View source
<template>
  <dict-checkbox v-model="value" :data="dictData"></dict-checkbox>
</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>

Disabled

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

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

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

MinMax

View source
<template>
  <dict-checkbox v-model="value" :data="dictData" :min="1" :max="2"></dict-checkbox>
</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>

Button

View source
<template>
  <dict-checkbox v-model="value" :data="dictData" button></dict-checkbox>
</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>

Border

View source
<template>
  <dict-checkbox v-model="value" :data="dictData" border></dict-checkbox>
</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>

Props

支持 el-checkbox 所有参数和事件

参数说明类型可选值默认值
v-model绑定值string / number / array
data字典数据array--