# 多选框

<template>
  <div class="wrapper">
    <dof-minibar title="4.4多选框"></dof-minibar>
    <scroller>
      <div class="title-box">
        <text class="title-text">基础组件</text>
      </div>
      <div class="content">
        <div class="checkboxBox">
          <dof-checkbox-list
            :list="list"
            :hasBottomBorder="false"
            :hasSubBottomBorder="false"
            @dofCheckBoxListChecked="checkBoxClicked"
          >
          </dof-checkbox-list>
        </div>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #f9f9f9;
}
.title-box {
  padding: 32px;
  background-color: #e5e5e8;
}
.title-text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  font-weight: 500;
}
.content {
  padding-top: 16px;
  padding-bottom: 16px;
}
.checkboxBox {
  background-color: #fff;
}

@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
  .checkboxBox {
    background-color: #1d1f22;
  }
}
</style>

<script>
import { DofMinibar, DofCheckboxList } from 'dolphin-weex-ui'
export default {
  components: { DofMinibar, DofCheckboxList },
  data: () => ({
    list: [
      {
        title: '列表',
        value: 1,
        checked: true
      },
      {
        title: '列表',
        value: 2
      },
      {
        title: '列表',
        value: 3
      }
    ],
    checkedList: [1]
  }),
  created() {},
  methods: {
    checkBoxClicked(e) {
      this.checkedList = e.checkedList
    }
  }
}
</script>