阿里云首页 移动开发平台 mPaaS

Checkbox 选择框

Checkbox 选择框文档介绍了使用该组件的不同方式以及 API 文档：

  • 在 Kylin 工程中使用该组件。
  • 在其他工程中使用，通过 ESModule 的方式导入组件。
  • API 文档 提供了 props、slots、events 的接口信息。

Kylin

  1. <dependency component="{ ListItemCheckbox }" src="@alipay/antui-vue" ></dependency>

ESModule

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

多选框

不带图片

截图

代码
  1. <template>
  2.   <List>
  3.     <ListItemCheckbox
  4.       id="test1"
  5.       label="表单项多选框——未选中标签"
  6.       v-model="c1"
  7.     />
  8.     <ListItemCheckbox
  9.       id="test2"
  10.       label="表单项多选框——选中标签"
  11.       v-model="c2"
  12.     />
  13.     <ListItemCheckbox
  14.       id="test3"
  15.       label="表单项多选框——未选中标签"
  16.       v-model="c3"
  17.     />
  18.     <ListItemCheckbox id="test4" label="表单项多选框——禁用" disabled />
  19.   </List>
  20. </template>
  22. <script>
  23.   export default {
  24.     data() {
  25.       return {
  26.         c1: false,
  27.         c2: true,
  28.         c3: false,
  29.       };
  30.     },
  31.   };
  32. </script>

带图片

截图

代码
  1. <template>
  2.   <div>
  3.     <List>
  4.       <ListItemCheckbox
  5.         id="test1"
  6.         label="表单项多选框——选中标签"
  7.         thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
  8.         thumbAlt="图片描述"
  9.       />
  10.       <ListItemCheckbox
  11.         id="test2"
  12.         label="表单项多选框——禁用"
  13.         thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
  14.         thumbAlt="图片描述"
  15.         disabled
  16.       />
  17.     </List>
  18.     <List class="towline">
  19.       <ListItemCheckbox
  20.         id="test3"
  21.         label="表单项多选框——选中标签"
  22.         brief="辅助说明"
  23.         thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
  24.         thumbAlt="图片描述"
  25.       />
  26.       <ListItemCheckbox
  27.         id="test4"
  28.         label="表单项多选框——禁用"
  29.         brief="辅助说明"
  30.         thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
  31.         thumbAlt="图片描述"
  32.         disabled
  33.       />
  34.     </List>
  35.   </div>
  36. </template>

单选框

截图

代码

  1. <template>
  2.   <div>
  3.     <List>
  4.       <ListCell type="header" slot="header">单选-自控制</ListCell>
  5.       <ListItemCheckbox
  6.         :id="'test'+i"
  7.         type="radio"
  8.         thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
  9.         v-for="i in 3"
  10.         :label="'标签文本'+i"
  11.         :tag="i + ''"
  12.         name="demo"
  13.         @input="onChange"
  14.       />
  15.     </List>
  16.     <List>
  17.       <ListCell type="header" slot="header">单选-受控</ListCell>
  18.       <ListItemCheckbox
  19.         :id="'test'+i"
  20.         type="radio"
  21.         thumb="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"
  22.         v-for="i in 3"
  23.         :label="'标签文本'+i"
  24.         :tag="i + ''"
  25.         name="demo2"
  26.         v-model="checked"
  27.       />
  28.       <AButton @click="checked = '2'">
  29.         选择2
  30.       </AButton>
  31.     </List>
  32.   </div>
  33. </template>
  35. <script>
  36.   export default {
  37.     data() {
  38.       return {
  39.         checked: '1',
  40.       };
  41.     },
  42.     methods: {
  43.       onChange(v) {
  44.         console.log(v);
  45.       },
  46.     },
  47.   };
  48. </script>

协议复选框

截图

代码

  1. <template>
  2.   <List>
  3.     <ListItemCheckbox
  4.       type="agreement"
  5.       id="agree"
  6.       label
  7.       v-model="checked"
  8.     >
  9.       <template slot="label">
  10.         <label class="am-ft-md" for="agree">同意</label>
  11.         <a href="#">《信用支付服务合同》</a>
  12.       </template>
  13.     </ListItemCheckbox>
  14.     <ListItemCheckbox
  15.       id="test2"
  16.       type="agreement"
  17.       label="表单项多选框——禁用"
  18.       disabled
  19.     />
  20.   </List>
  21. </template>
  23. <script>
  24.   export default {
  25.     data() {
  26.       return {
  27.         checked: false,
  28.       };
  29.     },
  30.   };
  31. </script>
首页 移动开发平台 mPaaS 客户端开发组件 前端框架与 UI 组件 基于 H5 框架 - UI 组件库 输入组件 Checkbox 选择框