lc-checkbox

复选框组件

注意事项

• 建议以成组的方式出现，使用lc-checkbox-list

效果

使用方法

<template>
  <div class="lc-demo">
    <scroller class="scroller">
      <title title="lc-checkbox"></title>
      <category title="Checkbox"></category>
      <lc-checkbox label="默认"
        :has-top-border="true"></lc-checkbox>
      <lc-checkbox label="默认选中"
        :checked="true"></lc-checkbox>
      <lc-checkbox label="未选中不可更改"
        :disabled="true"></lc-checkbox>
      <lc-checkbox label="选中不可更改"
        :disabled="true"
        :checked="true"
        :has-bottom-border="true"></lc-checkbox>

      <!-- <div class="margin"> -->
        <category title="CheckboxList"></category>
        <text class="checked-text">选中项 {{checkedList.toString()}}</text>        
        <lc-checkbox-list :list="list"
          @LcCheckboxListChecked="LcCheckboxListChecked"></lc-checkbox-list>
      <!-- </div> -->
    </scroller>
  </div>
</template>

<style scoped>
  .lc-demo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }

  .scroller {
    flex: 1;
  }

  .margin {
    margin-top: 60px;
  }

  .checked-text {
    font-size: 30px;
    color: #333;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 24px;
  }
</style>

<script>
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcCheckbox from 'lighting-ui/packages/lc-checkbox';
  import LcCheckboxList from 'lighting-ui/packages/lc-checkbox-list';

  export default {
    components: { Title, Category, LcCheckbox, LcCheckboxList },
    data: () => ({
      list: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2, checked: true },
        { label: '选项3', value: 3 },
        { label: '选项4', value: 4 }
      ],
      checkedList: [2]
    }),
    methods: {
      LcCheckboxListChecked (e) {
        this.checkedList = e.checkedList;
      }
    }
  }
</script>

可配置参数

Prop	Type	Required	Default	Description
label	String	Y	-	标签
value	[String、Number、Object]	Y	-	绑定的值
checked	Boolean	N	false	是否选中
disabled	Boolean	N	false	是否不可选
config	Object	N	{}	覆盖颜色和 icon
has-top-border	Boolean	N	true	是否有上边框
has-bottom-border	Boolean	N	true	是否有下边框

• 事件回调

  //点击事件回调  `@LcCheckboxItemChecked="LcCheckboxItemChecked"`
  将会返回e.value、e.checked

CheckboxList

Prop	Type	Required	Default	Description
list	Array	Y	[]	checkbox列表配置 (*1)
config	Object	N	{}	覆盖颜色和 icon (*2)

• 注1: list

  const list=[
      { title: '选项1', value: 1 },
      { title: '选项2', value: 2, checked: true },
      { title: '选项3', value: 3 },
      { title: '选项4', value: 4 }
  ];

• 注2: config

// 你可以这样覆盖样式和 icon:
<lc-checkbox-list :list="list"
  :config="config"
@LcCheckboxListChecked="LcCheckboxListChecked"></lc-checkbox-list>

const config={
  checkedIcon:'https://gw.alicdn.com/tfs/TB1Y9vlpwMPMeJjy1XcXXXpppXa-72-72.png',
  unCheckedIcon:'https://gw.alicdn.com/tfs/TB1PtN3pwMPMeJjy1XdXXasrXXa-72-72.png',
  checkedDisabledIcon:'https://gw.alicdn.com/tfs/TB1aPabpwMPMeJjy1XcXXXpppXa-72-72.png',
  unCheckedDisabledIcon:'https://gw.alicdn.com/tfs/TB1lTuzpwoQMeJjy0FoXXcShVXa-72-72.png',
  checkedColor: '#000000'
}

• 事件回调

  //点击事件回调  `@LcCheckboxListChecked="LcCheckboxListChecked"`
  将会返回已经选中的e.checkedList