[Improvement] Checkbox: remove unnecessary DOM (#636)

docs/demos/views/checkbox.vue

@@ -32,7 +32,7 @@
     </demo-block>
 
     <demo-block :title="$t('title5')">
-      <van-checkbox-group v-model="result" :max="max">
+      <van-checkbox-group v-model="result2" :max="max">
         <van-cell-group>
           <van-cell v-for="(item, index) in list" :key="index">
             <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
@@ -56,7 +56,7 @@ export default {
       checkbox: 'Checkbox',
       title3: 'Checkbox Group',
       title4: 'Inside a Cell',
-      title5: 'Configure the maximum amount of checked options'
+      title5: 'Maximum amount of checked options'
     }
   },
 
@@ -70,6 +70,7 @@ export default {
         'c'
       ],
       result: ['a', 'b'],
+      result2: [],
       max: 2
     };
   }
@@ -85,15 +86,13 @@ export default {
   .van-cell {
     .van-checkbox {
       margin: 0;
-    }
+      display: flex;
+      flex-direction: row-reverse;
 
-    .van-checkbox__input {
+      &__label {
-      float: right;
-      position: static;
-    }
-
-    span {
         margin: 0;
+        flex: 1;
+      }
     }
   }
 }

docs/markdown/en-US/checkbox.md

@@ -38,7 +38,7 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
 <van-checkbox-group v-model="result">
   <van-checkbox
     v-for="(item, index) in list"
-    :key="index"
+    :key="item"
     :name="item"
   >
     Checkbox {{ item }}
@@ -57,41 +57,32 @@ export default {
 };
 ```
 
+#### Maximum amount of checked options
+
+```html
+<van-checkbox-group v-model="result" :max="2">
+  <van-checkbox
+    v-for="(item, index) in list"
+    :name="item"
+    :key="item"
+  >
+    Checkbox {{ item }}
+  </van-checkbox>
+</van-checkbox-group>
+```
+
 #### Inside a Cell
 
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="index">
+    <van-cell v-for="(item, index) in list" :key="item">
       <van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
 ```
 
-#### Configure the maximum amount of checked options
-
-```html
-<van-checkbox-group v-model="result" :max="max">
-  <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="index">
-      <van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
-    </van-cell>
-  </van-cell-group>
-</van-checkbox-group>
-```
-
-```
-export default {
-  data() {
-    return {
-      list: ['a', 'b', 'c'],
-      result: ['a', 'b'],
-      max: 2
-    };
-  }
-};
-```
 
 ### Checkbox API
 
@@ -106,7 +97,7 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | disabled | Disable all checkboxes | `Boolean` | `false` | - |
-| max | the maximum amount of checked options | `Number` | `0`(Unlimited) | - |
+| max | Maximum amount of checked options | `Number` | `0`(Unlimited) | - |
 
 ### Checkbox Event
 

docs/markdown/zh-CN/checkbox.md

@@ -40,7 +40,7 @@ export default {
 <van-checkbox-group v-model="result">
   <van-checkbox
     v-for="(item, index) in list"
-    :key="index"
+    :key="item"
     :name="item"
   >
     复选框 {{ item }}
@@ -59,6 +59,20 @@ export default {
 };
 ```
 
+#### 设置最大可选数
+
+```html
+<van-checkbox-group v-model="result" :max="2">
+  <van-checkbox
+    v-for="(item, index) in list"
+    :key="item"
+    :name="item"
+  >
+    复选框 {{ item }}
+  </van-checkbox>
+</van-checkbox-group>
+```
+
 #### 与 Cell 组件一起使用
 
 此时你需要再引入`Cell`和`CellGroup`组件
@@ -66,40 +80,13 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="index">
+    <van-cell v-for="(item, index) in list" :key="item">
       <van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
 ```
 
-#### 设置最大可选数
-
-此时你需要引入`CellGroup`组件，`Cell`组件非必须
-
-```html
-<van-checkbox-group v-model="result" :max="max">
-  <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="index">
-      <van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
-    </van-cell>
-  </van-cell-group>
-</van-checkbox-group>
-```
-
-```
-export default {
-  data() {
-    return {
-      list: ['a', 'b', 'c'],
-      result: ['a', 'b'],
-      max: 2
-    };
-  }
-};
-```
-
-
 ### Checkbox API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |

packages/checkbox/index.vue

@@ -1,28 +1,23 @@
 <template>
-  <div
+  <div class="van-checkbox">
-    class="van-checkbox"
+    <icon
+      name="success"
+      class="van-checkbox__icon"
       :class="[
         `van-checkbox--${shape}`,
-      { 'van-checkbox--disabled': isDisabled || isLimit }
+        { 'van-checkbox--disabled': isDisabled },
+        { 'van-checkbox--checked': isChecked }
       ]"
-  >
+      @click="onClick"
-    <span class="van-checkbox__input">
+    />
-      <input
+    <span class="van-checkbox__label" @click="onClick">
-        v-model="currentValue"
-        type="checkbox"
-        class="van-checkbox__control"
-        :disabled="isDisabled"
-      >
-      <icon name="success" />
-    </span>
-    <span class="van-checkbox__label" @click="onClickLabel">
       <slot />
     </span>
   </div>
 </template>
 
 <script>
-import { create } from '../utils';
+import { create, isDef } from '../utils';
 import findParent from '../mixins/find-parent';
 
 export default create({
@@ -46,32 +41,38 @@ export default create({
     }
   },
 
-  computed: {
+  data() {
-    // whether is in van-checkbox-group
+    this.findParentByName('van-checkbox-group');
-    isGroup() {
+    return {};
-      return !!this.findParentByName('van-checkbox-group');
   },
 
+  computed: {
     currentValue: {
       get() {
-        return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
+        return this.parentGroup
+          ? this.parentGroup.value.indexOf(this.name) !== -1
+          : this.value;
       },
 
       set(val) {
-        if (this.isGroup && this.parentGroup) {
+        const { parentGroup } = this;
+        if (parentGroup) {
           const parentValue = this.parentGroup.value.slice();
           if (val) {
+            if (parentGroup.max && parentValue.length >= parentGroup.max) {
+              return;
+            }
             /* istanbul ignore else */
             if (parentValue.indexOf(this.name) === -1) {
               parentValue.push(this.name);
-              this.parentGroup.$emit('input', parentValue);
+              parentGroup.$emit('input', parentValue);
             }
           } else {
             const index = parentValue.indexOf(this.name);
             /* istanbul ignore else */
             if (index !== -1) {
               parentValue.splice(index, 1);
-              this.parentGroup.$emit('input', parentValue);
+              parentGroup.$emit('input', parentValue);
             }
           }
         } else {
@@ -84,23 +85,18 @@ export default create({
       const { currentValue } = this;
       if ({}.toString.call(currentValue) === '[object Boolean]') {
         return currentValue;
-      } else if (currentValue !== null && currentValue !== undefined) {
+      } else if (isDef(currentValue)) {
         return currentValue === this.name;
       }
     },
 
     isDisabled() {
-      return (this.isGroup && this.parentGroup && this.parentGroup.disabled) || this.disabled ||
+      return (this.parentGroup && this.parentGroup.disabled) || this.disabled;
-          (this.isGroup && this.parentGroup && this.parentGroup.max > 0 && this.parentGroup.max <= this.parentGroup.value.length && !this.isChecked);
-    },
-
-    isLimit() {
-      return this.isGroup && this.parentGroup && this.parentGroup.max > 0 && this.parentGroup.max <= this.parentGroup.value.length;
     }
   },
 
   methods: {
-    onClickLabel() {
+    onClick() {
       if (!this.isDisabled) {
         this.currentValue = !this.currentValue;
       }

packages/vant-css/src/checkbox.css

@@ -6,70 +6,45 @@ $van-checkbox-size: 20px;
   overflow: hidden;
   user-select: none;
 
-  .van-icon-success {
+  &__icon,
-    color: $white;
+  &__label {
-    display: block;
+    display: inline-block;
+    vertical-align: middle;
+    line-height: $van-checkbox-size;
+  }
+
+  &__icon {
     font-size: 12px;
+    color: transparent;
     text-align: center;
-    pointer-events: none;
     border: 1px solid #aaa;
     width: $van-checkbox-size;
     height: $van-checkbox-size;
     box-sizing: border-box;
-
-    &::before {
-      margin: 0 auto;
-      line-height: $van-checkbox-size;
-    }
-  }
-
-  &__input,
-  &__label {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  &__input {
-    position: relative;
-    height: $van-checkbox-size;
-  }
-
-  &__control {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
   }
 
   &__label {
     margin-left: 10px;
-    line-height: $van-checkbox-size;
   }
 
   &--round {
-    .van-icon-success {
     border-radius: 100%;
   }
-  }
 
-  &__control:checked + .van-icon-success {
+  &--checked {
+    color: #fff;
     border-color: $green;
     background-color: $green;
   }
 
   &--disabled {
-    .van-icon-success {
     color: $background-color;
     border-color: $gray-light;
     background-color: currentColor;
   }
 
-    .van-checkbox__control:checked + .van-icon-success {
+  &--disabled&--checked {
     border-color: $gray-light;
     background-color: $gray-light;
   }
 }
-}

test/unit/specs/checkbox.spec.js

@@ -185,7 +185,7 @@ describe('Checkbox', () => {
     });
 
     expect(wrapper.hasClass('van-checkbox')).to.be.true;
-    expect(wrapper.hasClass('van-checkbox--disabled')).to.be.true;
+    expect(wrapper.find('.van-checkbox--disabled').length).to.equal(1);
     expect(wrapper.vm.currentValue).to.be.false;
     expect(wrapper.vm.isDisabled).to.be.true;