全部产品
云市场
云游戏

Checkbox 选择框

更新时间:2020-08-07 20:28:58

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>
  21. <script>
  22. export default {
  23. data() {
  24. return {
  25. c1: false,
  26. c2: true,
  27. c3: false,
  28. };
  29. },
  30. };
  31. </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>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. checked: '1',
  39. };
  40. },
  41. methods: {
  42. onChange(v) {
  43. console.log(v);
  44. },
  45. },
  46. };
  47. </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>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. checked: false,
  27. };
  28. },
  29. };
  30. </script>