Mango UI

Checkbox 多选 pass 0.0.17+

基础用法

直接拿来用,这种方式需要每个都用 v-model 绑定值,绑定值为Bollean类型

选项1
选项2
选项3
展开查看
<mg-checkbox v-model="v1" activeColor="#faac28">选项1</mg-checkbox>
<mg-checkbox v-model="v2" activeColor="#faac28">选项2</mg-checkbox>
<mg-checkbox v-model="v3" disabled>选项3</mg-checkbox>

<script setup>
const v1 = ref(false)
const v2 = ref(true)
const v3 = ref(false)
</script>
1
2
3
4
5
6
7
8
9

开个玩笑默认颜色没有这么高调...是activeColor属性的作用

选项组 CheckboxGroup

只需要一个 v-model ,绑定值为Array类型

选项1
选项2
选项3
值：[ "3" ]
展开查看
<mg-checkbox-group v-model="checkboxGroupValue">
  <mg-checkbox value="1">选项1</mg-checkbox>
  <mg-checkbox value="2">选项2</mg-checkbox>
  <mg-checkbox value="3" disabled>选项3</mg-checkbox>
</mg-checkbox-group>
<div>值：{{ checkboxGroupValue }}</div>

<script setup>
  const checkboxGroupValue = ref(["3"])
</script>
1
2
3
4
5
6
7
8
9
10

按钮样式

给 mg-checkbox-group 设置 type="button" 即可

activeColor属性也可以直接传给mg-checkbox-group

选项1
选项2
选项3
值：[]
选项1
选项2
选项3
展开查看
<mg-checkbox-group v-model="checkboxBtnGroupValue" type='button'>
  <mg-checkbox value="1">选项1</mg-checkbox>
  <mg-checkbox value="2">选项2</mg-checkbox>
  <mg-checkbox value="3">选项3</mg-checkbox>
</mg-checkbox-group>

<div>值：{{ checkboxBtnGroupValue }}</div>

<mg-checkbox-group v-model="checkboxBtnGroupValue" type='button' activeColor="#faac28">
  <mg-checkbox value="1">选项1</mg-checkbox>
  <mg-checkbox value="2">选项2</mg-checkbox>
  <mg-checkbox value="3">选项3</mg-checkbox>
</mg-checkbox-group>

<script setup>
  const checkboxBtnGroupValue = ref([])
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

半选与尺寸

indeterminate属性可以设置半选状态,size属性可以设置尺寸,同时，demo里还展示了mg-checkbox-group的另一种使用方式,即通过items属性生成多选框

注意！：下方只是展示半选样式，暂无逻辑

全部
default
small
mini
default
small
mini
default
small
mini
展开查看
<mg-checkbox :indeterminate='true' value="1">全部</mg-checkbox>

<mg-checkbox-group v-model="sizeDemoValue">
  <mg-checkbox value="1">default</mg-checkbox>
  <mg-checkbox value="2" size="small">small</mg-checkbox>
  <mg-checkbox value="3" size="mini">mini</mg-checkbox>
</mg-checkbox-group>

<mg-checkbox-group type="button" size="small"
  :items="sizeDemoBoxes" v-model="sizeDemoValue"
>
</mg-checkbox-group>

<mg-checkbox-group type="button" size="mini"
  :items="sizeDemoBoxes" v-model="sizeDemoValue"
>
</mg-checkbox-group>

<script setup>
  const sizeDemoValue = ref([])
  const sizeDemoBoxes = ref([
    {label:'default',value:'1'},
    {label:'small',value:'2'},
    {label:'mini',value:'3'}
  ])
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

items 中的项目类型为：

interface CheckboxGroupItem {
  label: string;
  value: any;
  disabled: boolean;
  size: "medium" | "small" | "mini";
}
1
2
3
4
5
6

Checkbox Attributes

参数说明类型可选值默认值
v-model----
valuecheckbox在group中的绑定值---
label文本描述string--
disabled是否禁用boolean--
size尺寸stringmedium,small,minimedium
indeterminate是否半选boolean-false
activeColor选中时的颜色string--

CheckboxGroup Attributes

参数说明类型可选值默认值
v-model----
type多选框类型stringbutton-
size尺寸stringmedium,small,minimedium
activeColor选中时的颜色string--
itemscheckbox的信息CheckboxGroupItem 见上文--

Checkbox Event & CheckboxGroup Event

事件说明回参
change改变时触发当前值&label或选中信息