SuperUiPlus基础组件文档

主题

CheckBox ​

示例 ​

基本使用 ​

<template>
  <div>
    <SuperCheckbox v-model="value" :options="options"></SuperCheckbox>
  </div>
</template>

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

const value = ref([])
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]

</script>

不同类型展示状态 ​

<template>
  <div>
    <div>默认样式: type="checkbox"</div>
    <SuperCheckbox v-model="value" :options="options" type="checkbox"></SuperCheckbox>
    <div>按钮样式: type="button"</div>
    <SuperCheckbox v-model="value" :options="options" type="button"></SuperCheckbox>
    <div>边框样式: border</div>
    <SuperCheckbox v-model="value" :options="options" border></SuperCheckbox>
  </div>
</template>

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

const value = ref([])
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]

</script>

label-添加前缀 ​

<template>
  <div>
    <div>默认前缀: prefix</div>
    <SuperCheckbox v-model="value" :options="options" prefix></SuperCheckbox>
    <div>自定义前缀: prefix="测试前缀-"</div>
    <SuperCheckbox v-model="value" :options="options" prefix="测试前缀-"></SuperCheckbox>
    <div>函数前缀: :prefix="(item: { label: string; value: string }) => `函数前缀-${item.value}-`"</div>
    <SuperCheckbox v-model="value" :options="options" :prefix="(item: { label: string; value: string }) => `函数前缀-${item.value}-`"
></SuperCheckbox>
  </div>
</template>

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

const value = ref([])
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]

</script>

禁用状态 ​

<template>
  <div>
    <div>全部禁用</div>
    <SuperCheckbox v-model="value" :options="options" disabled></SuperCheckbox>
    <div>选项禁用</div>
    <SuperCheckbox v-model="value" :options="options" :disabled="isDisabled"></SuperCheckbox>
  </div>
</template>

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

const value = ref([])
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]

const isDisabled = (item: { value: string }) => item.value === '2'
</script>

包含/排除选项 ​

<template>
  <div>
    <div>包含选项: include="['1', '3']"</div>
    <SuperCheckbox v-model="value" :options="options" :include="['1', '3']"></SuperCheckbox>
    <div>排除选项: exclude="['1', '3']"</div>
    <SuperCheckbox v-model="value" :options="options" :exclude="['1', '3']"></SuperCheckbox>
  </div>
</template>

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

const value = ref([])
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]

</script>

显示全选按钮 ​

<template>
  <div>
    <SuperCheckbox v-model="value" :options="options" hasCheckAll></SuperCheckbox>
  </div>
</template>

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

const value = ref([])
const options = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
]

</script>

选项互斥 ​

<template>
  <div>
    <div>互斥选项: :exclusion="[{ value: '2', exclusion: '3' },{ value: '4', exclusion: ['3', '5'] },]"</div>
    <SuperCheckbox
      v-model="value"
      :options="options"
      hasCheckAll
      :exclusion="[
        { value: '2', exclusion: '3' },
        { value: '4', exclusion: ['3', '5'] },
      ]"
    ></SuperCheckbox>
    <div>互斥选项: 2</div>
    <SuperCheckbox
      v-model="value"
      :options="options"
      hasCheckAll
      :exclusion="'2'"
    ></SuperCheckbox>
    <div>所选中的值：{{ value }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref([])
const options = [
  { value: '1', label: '电视机' },
  { value: '2', label: '冰箱' },
  { value: '3', label: '洗衣机' },
  { value: '4', label: '空调' },
  { value: '5', label: '微波炉' },
  { value: '6', label: '电饭煲' },
  { value: '99', label: '其他' },
]
</script>

API ​

Props ​

参数说明类型可选值默认值
modelValue绑定值Array<any>--
type按钮样式string'checkbox' | 'button'checkbox
size尺寸stringsmall | default | largedefault
border是否显示边框booleantrue|falsefalse
options选项数据源Array<any>--
labelKey自定义label字段属性名string-label
valueKey自定义value字段属性名string-value
prefix是否使用前缀boolean | ((item: any) => boolean)--
disabled是否禁用boolean | ((item: any) => boolean)--
include包含的选项Array<string | number>--
exclude排除的选项Array<string | number>--
hasCheckAll是否显示全选booleantrue/falsefalse
valueKeys选中项的值类型配置{ valueKey: string; labelKey: string }--
exclusion选项互斥number | string | { value: string; exclusion: string} | Array<{ value: string; exclusion: string}>[]--

exclusion 属性用法说明 ​

exclusion 四种格式

  • number/string 当为 number 或者 字符串时，exclusion 的值与其他项互斥
  • map 当为 map 对象时，格式为{ value: "2", exclusion: "3" }选中 2 则 3 取消选中，选中 3 则 2 取消选中 或者 { value: "2", exclusion: ["3", "4"] } ；选中 2 则 3、4 取消选中，选中 3 或者 4 则 2 取消选中
  • array 当为 array 时，格式为[{ value: "2", exclusion: "3" }, { value: "4", exclusion: ["3", "5"] }] 选中 2 时，3 取消选中，选择 4 时，3 和 5 取消选中

Events ​

事件名说明回调参数
change当绑定值变化时触发的事件Function<t-tip content='(value:[string/number], result: values[]) => void
'/>

Slots ​

插槽名说明
default自定义默认内容