<!-- 
 * @description: 
 * @fileName: index.vue 
 * @author: lh 
 * @date: 2021-08-05 19:11:55 
 * @后台人员:  
 * @path:  
 * @version: V1.0.5 
!-->
<template>
  <div class="page-container">
      <div class="button-item">
          <p>checkbox 01</p>
          <el-rrf-checkbox v-model="radio1" >已选</el-rrf-checkbox>
          <el-rrf-checkbox v-model="radio2" >未选</el-rrf-checkbox>
          <el-rrf-checkbox v-model="radio1" disabled >已选--禁止</el-rrf-checkbox>
          <el-rrf-checkbox v-model="radio2" disabled >未选--禁止</el-rrf-checkbox>
          <el-rrf-checkbox v-model="radio1" :indeterminate="indeterminate">全选</el-rrf-checkbox>
      </div>
      <div class="button-item">
          <p>checkbox 02</p>
          <el-rrf-checkbox v-model="radio1" border>已选</el-rrf-checkbox>
          <el-rrf-checkbox v-model="radio2" border>未选</el-rrf-checkbox>
          <el-rrf-checkbox v-model="radio1" disabled border>已选--禁止</el-rrf-checkbox>
          <el-rrf-checkbox v-model="radio2" disabled border>未选--禁止</el-rrf-checkbox>
      </div>
      <div class="button-item">
          <p>checkbox 03</p>
           <el-rrf-checkbox-group v-model="checkboxGroup1" size="small">
                <el-rrf-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-rrf-checkbox-button>
           </el-rrf-checkbox-group>
      </div>
  </div>
</template>

<script>
import ElRrfCheckbox from "pkgs/RfCheckbox/src";
import ElRrfCheckboxButton from "pkgs/RfCheckboxButton/src";
import ElRrfCheckboxGroup from "pkgs/RfCheckboxGroup/src";

const cityOptions = ['周一', '周二', '周三', '周四', '周五'];
export default {
    components: {
        ElRrfCheckbox,
        ElRrfCheckboxButton,
        ElRrfCheckboxGroup
    },
    data() {
        return {
            radio1: true,
            radio2: false,
            indeterminate: true,
            checkboxGroup1: ['周一'],
            cities: cityOptions
        }
    },
    methods: {
        radioChange(e) {
            console.log("e========",e)
        },
        groupChange(e) {
            console.log("e2======",e)
        }
    }
}
</script>

<style lang="css" scoped>
    .page-container{
        display: flex;
        flex-direction: column;
    }
    .page-container .button-item{
        margin: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>