清新UI組件庫——checkboxt組件開發思路

清新組件庫：http://ifresh-ui.yating.online/

源碼地址：https://github.com/Chenyating/iFresh-ui

checkbox組件遇到的問題

1. 跟radio性質差不多。

2. 當爲checkbox組的時候，值的類型爲array；

3. 判斷當單個值的時候。
   先判斷value是否存在，再判斷是否爲boolean，選中取反。值爲label；

修改樣式

checkbox無法直接改變樣式只能通過連接到label標籤來改變checkbox的樣式.

當點擊的有for屬性的label標籤時，對應的Checkbox複選框會被選中。這意味着，我們可以通過label的點擊事件來處理我們的Checkbox複選框。

    <input type="checkbox" :id="id"/>
    <label :for="id">{{label}}</label>

原來input[type=checkbox] 要隱藏掉；
對label做樣式修改；

    input[type=checkbox] {
        display: none;
    }

    label {
        cursor: pointer;
    }

    label:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 20px;
        background: @white;
        line-height: 20px;
        cursor: pointer;
        /*改變複選框的邊框顏色也可以不要邊框*/
        border: solid 2px @c-light-primary;
        border-top: 0;
        border-bottom: 0;
        border-radius: 20px;
    }

    input:checked+label:before {
        /*before爲僞元素可以在元素之後添加內容*/
        display: inline-block;
        /*	css3中的content字符編碼*/
        content: "\2618";
        /*	複選框裏面的√居中*/
        text-align: center;
        /*	複選框裏面的√大小*/
        font-size: 20px;
        /*	字體的顏色*/
        color: @c-primary;
        /*  複選框勾選後的背景顏色*/
    }

全選和反選(待解決)

這個要怎麼解決？

1. 在checkbox-group裏
2. 在checkbox-group外面