Checkbox 选择框 - 移动开发平台 mPaaS

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

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

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

多选框

不带图片

截图

代码

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