Checkbox 多选框

基础用法

html

<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>

禁用状态

html

<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>

只读状态

html

<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>

圆型

html

<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>

插槽

html

<vz-checkbox v-model="checkboxValue">
  <text>已阅读并同意</text>
  <text @click.stop>《用户条款》</text>
  <text>与</text>
  <text @click.stop>《隐私协议》</text>
</vz-checkbox>

文本不换行

html

<vz-checkbox-group v-model="checkboxGroupValue" nowrap min-height="150rpx">
  <vz-checkbox value="1" label="豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。"></vz-checkbox>
  <vz-checkbox value="2" label="物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。"></vz-checkbox>
  <vz-checkbox value="3" label="雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。"></vz-checkbox>
</vz-checkbox-group>

数量限制

html

<vz-checkbox-group v-model="checkboxGroupValue" min="1" max="3" min-height="100rpx">
  <vz-checkbox value="1" label="复选框一"></vz-checkbox>
  <vz-checkbox value="2" label="复选框二"></vz-checkbox>
  <vz-checkbox value="3" label="复选框三"></vz-checkbox>
  <vz-checkbox value="4" label="复选框四"></vz-checkbox>
  <vz-checkbox value="5" label="复选框五"></vz-checkbox>
  <vz-checkbox value="6" label="复选框六"></vz-checkbox>
</vz-checkbox-group>

自定义颜色

html

<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>

自定义尺寸

html

<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>

纵向排列

html

<vz-checkbox-group v-model="checkboxGroupValue" vertical>
  <vz-checkbox value="1" label="复选框一"></vz-checkbox>
  <vz-checkbox value="2" label="复选框二"></vz-checkbox>
  <vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>

下边框

html

<vz-checkbox-group v-model="checkboxGroupValue" vertical border>
  <vz-checkbox value="1" label="复选框一"></vz-checkbox>
  <vz-checkbox value="2" label="复选框二"></vz-checkbox>
  <vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>

右对齐

html

<vz-checkbox-group v-model="checkboxGroupValue" vertical border align="right">
  <vz-checkbox value="1" label="复选框一"></vz-checkbox>
  <vz-checkbox value="2" label="复选框二"></vz-checkbox>
  <vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>

复选框在右侧

html

<vz-checkbox-group v-model="checkboxGroupValue" vertical border icon-placement="right">
  <vz-checkbox value="1" label="复选框一"></vz-checkbox>
  <vz-checkbox value="2" label="复选框二"></vz-checkbox>
  <vz-checkbox value="3" label="复选框三"></vz-checkbox>
</vz-checkbox-group>

Checkbox Props

属性名	说明	类型	默认值
v-model / model-value	绑定的值	string / number / boolean	-
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.CSSProperties`	-

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.CSSProperties`	-

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"),
);

Checkbox 多选框 ​

基础用法 ​

禁用状态 ​

只读状态 ​

圆型 ​

插槽 ​

文本不换行 ​

数量限制 ​

自定义颜色 ​

自定义尺寸 ​

纵向排列 ​

下边框 ​

右对齐 ​

复选框在右侧 ​

Checkbox Props ​

Checkbox Events ​

Checkbox Slots ​

Checkbox CSS ​

Checkbox SCSS ​

Checkbox Group Props ​

Checkbox Events ​

Checkbox Group CSS ​

Checkbox Group SCSS ​

Checkbox 多选框

基础用法

禁用状态

只读状态

圆型

插槽

文本不换行

数量限制

自定义颜色

自定义尺寸

纵向排列

下边框

右对齐

复选框在右侧

Checkbox Props

Checkbox Events

Checkbox Slots

Checkbox CSS

Checkbox SCSS

Checkbox Group Props

Checkbox Events

Checkbox Group CSS

Checkbox Group SCSS