Checkbox 多选框
基础用法
html
<vz-checkbox v-model="checkboxValue" label="复选框"></vz-checkbox>
<vz-checkbox-group v-model="checkboxGroupValue">
<vz-checkbox value="1" label="复选框一"></vz-checkbox>
<vz-checkbox value="2" label="复选框二"></vz-checkbox>
<vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxValue = ref(false);
const checkboxGroupValue = ref([]);禁用状态
html
<vz-checkbox v-model="checkboxValue" label="复选框" disabled></vz-checkbox>
<vz-checkbox-group v-model="checkboxGroupValue" disabled>
<vz-checkbox value="1" label="复选框一"></vz-checkbox>
<vz-checkbox value="2" label="复选框二"></vz-checkbox>
<vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxValue = ref(false);
const checkboxGroupValue = ref([]);只读状态
html
<vz-checkbox v-model="checkboxValue" label="复选框" readonly></vz-checkbox>
<vz-checkbox-group v-model="checkboxGroupValue" readonly>
<vz-checkbox value="1" label="复选框一"></vz-checkbox>
<vz-checkbox value="2" label="复选框二"></vz-checkbox>
<vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxValue = ref(false);
const checkboxGroupValue = ref([]);圆型
html
<vz-checkbox v-model="checkboxValue" label="复选框" circle></vz-checkbox>
<vz-checkbox-group v-model="checkboxGroupValue" circle>
<vz-checkbox value="1" label="复选框一"></vz-checkbox>
<vz-checkbox value="2" label="复选框二"></vz-checkbox>
<vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxValue = ref(false);
const checkboxGroupValue = ref([]);自定义颜色
html
<vz-checkbox
v-model="checkboxValue"
label="复选框"
color="var(--app-color-success)"
label-color="var(--app-color-info)"
></vz-checkbox>
<vz-checkbox-group v-model="checkboxGroupValue" color="var(--app-color-success)" label-color="var(--app-color-info)">
<vz-checkbox value="1" label="复选框一"></vz-checkbox>
<vz-checkbox value="2" label="复选框二"></vz-checkbox>
<vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxValue = ref(false);
const checkboxGroupValue = ref([]);自定义尺寸
html
<vz-checkbox v-model="checkboxValue" label="复选框" size="40rpx" label-size="30rpx"></vz-checkbox>
<vz-checkbox-group v-model="checkboxGroupValue" size="40rpx" label-size="30rpx">
<vz-checkbox value="1" label="复选框一"></vz-checkbox>
<vz-checkbox value="2" label="复选框二"></vz-checkbox>
<vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxValue = ref(false);
const checkboxGroupValue = ref([]);插槽
html
<vz-checkbox v-model="checkboxValue">
<text>已阅读并同意</text>
<text @click.stop>《用户条款》</text>
<text>与</text>
<text @click.stop>《隐私协议》</text>
</vz-checkbox>typescript
import { ref } from "vue";
const checkboxValue = ref(false);文本不换行
html
<vz-checkbox
v-model="checkboxValue"
label="豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。"
nowrap
>
</vz-checkbox>typescript
import { ref } from "vue";
const checkboxValue = ref(false);数量限制
html
<vz-checkbox-group v-model="checkboxGroupValue" min="1" max="3" min-height="160rpx">
<vz-checkbox v-model="checkboxValue" value="1" label="复选框一"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="2" label="复选框二"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="3" label="复选框三"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="4" label="复选框四"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="5" label="复选框五"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="6" label="复选框六"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxGroupValue = ref([]);纵向排列
html
<vz-checkbox-group v-model="checkboxGroupValue" vertical>
<vz-checkbox v-model="checkboxValue" value="1" label="复选框一"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="2" label="复选框二"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxGroupValue = ref([]);下边框
html
<vz-checkbox-group v-model="checkboxGroupValue" vertical border>
<vz-checkbox v-model="checkboxValue" value="1" label="复选框一"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="2" label="复选框二"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxGroupValue = ref([]);右对齐
html
<vz-checkbox-group v-model="checkboxGroupValue" vertical border align="right">
<vz-checkbox v-model="checkboxValue" value="1" label="复选框一"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="2" label="复选框二"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxGroupValue = ref([]);复选框在右侧
html
<vz-checkbox-group v-model="checkboxGroupValue" vertical border icon-placement="right">
<vz-checkbox v-model="checkboxValue" value="1" label="复选框一"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="2" label="复选框二"></vz-checkbox>
<vz-checkbox v-model="checkboxValue" value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>typescript
import { ref } from "vue";
const checkboxGroupValue = ref([]);Checkbox Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定的值 | boolean / string / number | - |
| value | 选中状态的值，仅在 checkbox-group 中 有效 | string / number | - |
| true-value | 选中时的值，在 checkbox-group 中 无效 | string / number | - |
| false-value | 没有选中时的值，在 checkbox-group 中 无效 | string / number | - |
| disabled | 是否禁用 | boolean | false |
| readonly | 是否只读 | boolean | false |
| block | 是否为块级元素 | boolean | false |
| circle | 是否为圆形选择框 | boolean | false |
| size | 尺寸 | string / number | 1.2em |
| color | 颜色（优先级低于 active-color 和 inactive-color） | string | - |
| active-color | 选中时的颜色 | string | --vz-color-primary |
| inactive-color | 未选中时的颜色 | string | --vz-border-color |
| label | 文本内容 | string | - |
| label-size | 文本字体大小 | string / number | inherit |
| label-color | 文本字体颜色 | string / number | inherit |
| align | 文本对齐位置 | left / center / right | left |
| nowrap | 文本不能换行 | boolean | false |
| box-placement | 选择框相对文本位置 | left / right | left |
| gap | 选择框与文本的距离 | string / number | --vz-gap-base |
| validate | 是否触发表单校验 | boolean | true |
| i-class | 根节点样式类 | string | - |
| i-style | 根节点样式 | Vue.StyleValue | - |
Checkbox Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | boolean / string / number |
Checkbox Slots
| 插槽名 | 说明 |
|---|---|
| default | 文本 |
Checkbox CSS
| 变量名 | 说明 | 默认值 |
|---|---|---|
| --vz-checkbox-mr | margin-right | --vz-gap-larger |
| --vz-checkbox-active-color | props.activeColor | --vz-color-primary |
| --vz-checkbox-inactive-color | props.inactiveColor | --vz-border-color |
| --vz-checkbox-size | props.size | 1.2em |
| --vz-checkbox-label-size | props.labelSize | inherit |
| --vz-checkbox-label-color | props.labelColor | inherit |
| --vz-checkbox-gap | props.gap | --vz-gap-base |
| --vz-checkbox-min-height | 最小高度 | - |
| --vz-checkbox-border-color | 纵向排列时下边框颜色 | --vz-border-color |
| --vz-checkbox-radius | 选择框圆角 | --vz-border-radius-base |
Checkbox SCSS
scss
$checkbox: (
"size": 1.2em,
"active-color": getCssVar("color", "primary"),
"inactive-color": getCssVar("border-color"),
"radius": getCssVar("border-radius", "small"),
"gap": getCssVar("gap", "base"),
"box-disabled-bg-color": getCssVar("bg-color", "disabled"),
"box-disabled-color": getCssVar("text-color", "disabled"),
);Checkbox Group Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model:model-value | 绑定的值 | Array<string / number> | [] |
| disabled | 是否禁用 | boolean | false |
| readonly | 是否只读 | boolean | false |
| min | 可被勾选的最小数量 | number / string | - |
| max | 可被勾选的最大数量 | number / string | - |
| vertical | 是否纵向排列 | boolean | false |
| circle | 是否为圆形选择框 | boolean | false |
| size | 尺寸 | string / number | 1.2em |
| color | 颜色（优先级低于 active-color 和 inactive-color） | string | - |
| active-color | 选中时的颜色 | string | --vz-color-primary |
| inactive-color | 未选中时的颜色 | string | --vz-border-color |
| label-size | 文本字体大小 | string / number | inherit |
| label-color | 文本字体颜色 | string / number | inherit |
| align | 文本对齐位置 | left / center / right | left |
| nowrap | 文本不能换行 | boolean | false |
| min-height | 最小高度，纵向时为 checkbox 最小高度 | boolean | --vz-height-base |
| box-placement | 选择框相对文本位置 | left / right | left |
| group-gap | 横向排列时复选框之间的距离 | boolean | --vz-gap-larger |
| gap | 选择框与文本的距离 | string / number | --vz-gap-base |
| border | 纵向排列时是否显示 checkbox 下边框 | boolean | false |
| validate | 是否触发表单校验 | boolean | true |
| i-class | 根节点样式类 | string | - |
| i-style | 根节点样式 | Vue.StyleValue | - |
Checkbox Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Array<string / number> |
Checkbox Group CSS
| 变量名 | 说明 | 默认值 |
|---|---|---|
| --vz-checkbox-group-min-height | props.minHeight | --vz-height-base |
| --vz-checkbox-group-gap | props.groupGap | --vz-gap-larger |
| --vz-checkbox-group-border-color | 纵向排列时 checkbox 下边框颜色 | --vz-border-color |
Checkbox Group SCSS
scss
$checkbox-group: (
"min-height": getCssVar("height", "base"),
"gap": getCssVar("gap", "larger"),
"border-color": getCssVar("border-color"),
);