Checkbox 选择框文档介绍了使用该组件的不同方式以及 API 文档:
Kylin
<dependency component="{ ListItemCheckbox }" src="@alipay/antui-vue" ></dependency>
ESModule
import { ListItemCheckbox } from '@alipay/antui-vue';
API 文档
props
属性 |
说明 |
类型 |
默认值 |
type |
选择框类型, 可选 checkbox ,radio ,agreement |
String |
checkbox |
value |
对于 radio 框,返回的是选中的 tag 字段,对于 checkbox/agreement 返回的是true/false |
String, boolean |
- |
tag |
对于 radio 框,同一个 name 下面不同的选项值 |
String |
- |
label |
选择框的标签,如果需要自定义 DOM ,请使用 slot[name=label] |
string |
- |
id |
input 的 id 属性 |
String |
- |
name |
input 的 name 属性 |
String |
- |
disabled |
是否禁用选择框 |
boolean |
false |
brief |
用于辅助标签,agreement 类型不可用 |
String |
- |
thumb |
显示图片的 url,agreement 类型不可用 |
String |
- |
thumbAlt |
图片的 alt 属性,agreement 类型不可用 |
String |
- |
slots
name |
说明 |
scope |
label |
可将 props.label 从字符串扩展为 DOM 节点,如果自定义 label ,需要将 label[for] 字段填充为 props.id |
{id:String} |
events
name |
说明 |
函数 |
input |
适配 v-model ,如果类型为 radio 返回选中 tag 的字符串,否则返回是否选中的布尔值 |
Function(value: [string(radio), boolean(其它类型)]): void |
Demo
多选框
不带图片
截图

代码
<template>
<List>
<ListItemCheckbox
id="test1"
label="表单项多选框——未选中标签"
v-model="c1"
/>
<ListItemCheckbox
id="test2"
label="表单项多选框——选中标签"
v-model="c2"
/>
<ListItemCheckbox
id="test3"
label="表单项多选框——未选中标签"
v-model="c3"
/>
<ListItemCheckbox id="test4" label="表单项多选框——禁用" disabled />
</List>
</template>
<script>
export default {
data() {
return {
c1: false,
c2: true,
c3: false,
};
},
};
</script>
带图片
截图

代码
<template>
<div>
<List>
<ListItemCheckbox
id="test1"
label="表单项多选框——选中标签"
thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
thumbAlt="图片描述"
/>
<ListItemCheckbox
id="test2"
label="表单项多选框——禁用"
thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
thumbAlt="图片描述"
disabled
/>
</List>
<List class="towline">
<ListItemCheckbox
id="test3"
label="表单项多选框——选中标签"
brief="辅助说明"
thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
thumbAlt="图片描述"
/>
<ListItemCheckbox
id="test4"
label="表单项多选框——禁用"
brief="辅助说明"
thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
thumbAlt="图片描述"
disabled
/>
</List>
</div>
</template>
单选框
截图

代码
<template>
<div>
<List>
<ListCell type="header" slot="header">单选-自控制</ListCell>
<ListItemCheckbox
:id="'test'+i"
type="radio"
thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
v-for="i in 3"
:label="'标签文本'+i"
:tag="i + ''"
name="demo"
@input="onChange"
/>
</List>
<List>
<ListCell type="header" slot="header">单选-受控</ListCell>
<ListItemCheckbox
:id="'test'+i"
type="radio"
thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
v-for="i in 3"
:label="'标签文本'+i"
:tag="i + ''"
name="demo2"
v-model="checked"
/>
<AButton @click="checked = '2'">
选择2
</AButton>
</List>
</div>
</template>
<script>
export default {
data() {
return {
checked: '1',
};
},
methods: {
onChange(v) {
console.log(v);
},
},
};
</script>
协议复选框
截图

代码
<template>
<List>
<ListItemCheckbox
type="agreement"
id="agree"
label
v-model="checked"
>
<template slot="label">
<label class="am-ft-md" for="agree">同意</label>
<a href="#">《信用支付服务合同》</a>
</template>
</ListItemCheckbox>
<ListItemCheckbox
id="test2"
type="agreement"
label="表单项多选框——禁用"
disabled
/>
</List>
</template>
<script>
export default {
data() {
return {
checked: false,
};
},
};
</script>
在文档使用中是否遇到以下问题
更多建议
匿名提交