Checkbox 复选框

QR

扫二维码查看演示效果

复选框

Checkbox

Code Example

<template>
  <div>
    <WingBlank>
      <h3>基本</h3>
    </WingBlank>
    <List renderHeader="CheckboxItem demo">
      <CheckboxItem Title="Barcelona" defaultChecked></CheckboxItem>
      <CheckboxItem Title="Stuttgart" ></CheckboxItem>
      <CheckboxItem Title="Paris" extra="extra content"></CheckboxItem>
      <CheckboxItem Title="Liverpool" disabled defaultChecked subtitle="Disable options"></CheckboxItem>
    </List>
    <AgreeItem>Agree
      <a @click="onClick">agreement</a></AgreeItem>
  </div>
</template>

<script>
  import Button from '@/components/button'
  import Checkbox from '@/components/checkbox'
  import CheckboxItem from '@/components/checkbox-item'
  import AgreeItem from '@/components/agree-item'
  import WingBlank from '@/components/wing-blank'
  import WhiteSpace from '@/components/white-space'
  import Flex from '@/components/flex'
  import FlexItem from '@/components/flex-item'
  import List from '@/components/list'
  import ListItem from '@/components/list-item'

  export default {
    components: {
      WingBlank,
      WhiteSpace,
      Checkbox,
      List,
      ListItem,
      CheckboxItem,
      Button,
      AgreeItem,
      Flex,
      FlexItem
    },
    data () {
      return {
        checked: ''
      }
    },
    methods: {
      stuOnChange (value) {
        console.log(value)
      },
      onClick () {
        console.log(234)
      }
    }
  }
</script>

props

属性	说明	类型	默认值
name	name	String	无
defaultChecked	初始是否选中	Boolean	无
checked	指定当前是否选中	Boolean	无
disabled	禁用	Boolean	false
onChange	change 事件触发的回调函数	Function	无

CheckboxItem

基于ListItem对Checkbox进行封装,ListItem的thumb属性固定传入Checkbox,其他属性和ListItem一致。 其他 API和 Checkbox 相同。

AgreeItem

用于同意协议这种场景的复选框

https://ladybirddev.github.io/ui-nuclear-mobile-demo/#/checkbox