Viog UI

多选框 checkbox 待优化

用于数据多选情况

使用说明

简单引入

你需要通过v-model向该组件绑定一个Ref<never[]>控制变量，用于记录多选目标数组!!! 一定传入一个数组！！！

value属性为设置checkbox设置属性值

简单使用
展开代码
<vi-checkbox v-model="choosed" name="simpleuse" value="简单使用"/>

<script>
const choosed = ref([])
</script>

默认情况下选项展示名称为value，你也可以通过默认插槽设置别名

使用
展开代码
<vi-checkbox v-model="choosed" name="simpleuse" value="简单使用">使用</vi-checkbox>

当前选中后不可取消，后续版本可能会做出修改

样式

通过type属性定义不同的多选框样式，目前有default与button两种样式

使用使用
展开代码
<vi-checkbox v-model="choosed" name="simpleuse" value="简单使用">使用</vi-checkbox>
<vi-checkbox v-model="choosed" name="simpleuse" value="简单使用" type="button">使用</vi-checkbox>

颜色

可以通过color属性修改多选框颜色

可以使用mutate属性进行色彩变异

purpleredpinkyellowgreenblue
purpleredpinkyellowgreenblue
purpleredpinkyellowgreenblue
purpleredpinkyellowgreenblue
展开代码
<vi-checkbox v-model="choosed" name="simpleuse" value="purple" color="purple"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="red" color="red"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="pink" color="pink"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="yellow" color="yellow"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="green" color="green"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="blue" color="blue"/>
<vi-divider/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="purple" color="purple"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="red" color="red"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="pink" color="pink"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="yellow" color="yellow"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="green" color="green"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="blue" color="blue"/>
<vi-divider/>
<vi-checkbox v-model="choosed" name="simpleuse" value="purple" type="button" color="purple"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="red" type="button" color="red"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="pink" type="button" color="pink"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="yellow" type="button" color="yellow"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="green" type="button" color="green"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="blue" type="button" color="blue"/>
<vi-divider/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="purple" type="button" color="purple"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="red" type="button" color="red"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="pink" type="button" color="pink"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="yellow" type="button" color="yellow"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="green" type="button" color="green"/>
<vi-checkbox v-model="choosed" mutate name="simpleuse" value="blue" type="button" color="blue"/>

尺寸

通过size类型定义组件尺寸

bigmiddlesmall
bigmiddlesmall
展开代码
<vi-checkbox v-model="choosed" name="simpleuse" value="big" size="big"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="middle" size="middle"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="small" size="small"/>
<vi-divider/>
<vi-checkbox v-model="choosed" name="simpleuse" value="big" type="button" size="big"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="middle" type="button" size="middle"/>
<vi-checkbox v-model="choosed" name="simpleuse" value="small" type="button" size="small"/>

禁用

通过disabled属性禁用组件

使用使用
展开代码
<vi-checkbox v-model="choosed" name="simpleuse" value="使用" disabled/>
<vi-checkbox v-model="choosed" name="simpleuse" value="使用" type="button" disabled/>

多选框组

每一个相同name的单选框都需要绑定一遍未免太不方便，可以使用checkbox-group组件简化绑定

你的爱好
茶咖啡水
展开代码
你的爱好
<vi-checkbox-group name="sex" v-model="choosed">
  <vi-checkbox value="tea" color="blue">茶</vi-checkbox>
  <vi-checkbox value="coffe" color="pink">咖啡</vi-checkbox>
  <vi-checkbox value="water" color="green">水</vi-checkbox>
</vi-checkbox-group>

组合选择 新功能

你可以为一个多选框通过数组绑定多个value，达到组合选择效果

菜单
全选爆炒小龙虾 99元/斤纸包鱼 78元/斤矿泉水 2元/瓶
展开代码
<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    菜单
    <vi-checkbox-group name="menu" v-model="choosed2">
      <vi-checkbox :value="['爆炒小龙虾', '纸包鱼', '矿泉水']">全选</vi-checkbox>
      <vi-checkbox value="爆炒小龙虾">爆炒小龙虾 99元/斤</vi-checkbox>
      <vi-checkbox value="纸包鱼">纸包鱼 78元/斤</vi-checkbox>
      <vi-checkbox value="矿泉水">矿泉水 2元/瓶</vi-checkbox>
    </vi-checkbox-group>
  </div>
</template>

Props

checkbox

属性名描述类型默认值

checkbox-group

属性名描述类型默认值

插槽

checkbox

插槽名描述有无默认内容

checkbox-group

插槽名描述有无默认内容

事件支持

checkbox

事件名描述参数列表

checkbox-group

事件名描述参数列表