[bugfix] Checkbox: should not render label when label is empty (#920)

docs/demos/views/checkbox.vue

@@ -1,17 +1,16 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
+      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-checkbox :value="false" disabled>{{ $t('checkbox') }} 2</van-checkbox>
-      <van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox>
+      <van-checkbox :value="false" disabled>{{ $t('checkbox') }}</van-checkbox>
+      <van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('labelDisabled')">
-      <van-checkbox v-model="checkbox3" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
-      <van-checkbox v-model="checkbox4" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
+      <van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -27,20 +26,22 @@
     </demo-block>
 
     <demo-block :title="$t('title4')">
-      <van-checkbox-group v-model="result">
-        <van-cell-group>
-          <van-cell v-for="(item, index) in list" :key="index">
-            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
-          </van-cell>
-        </van-cell-group>
+      <van-checkbox-group v-model="result2" :max="2">
+        <van-checkbox
+          v-for="(item, index) in list"
+          :key="index"
+          :name="item"
+        >
+          {{ $t('checkbox') }} {{ item }}
+        </van-checkbox>
       </van-checkbox-group>
     </demo-block>
 
     <demo-block :title="$t('title5')">
-      <van-checkbox-group v-model="result2" :max="max">
+      <van-checkbox-group v-model="result3">
         <van-cell-group>
-          <van-cell v-for="(item, index) in list" :key="index">
-            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
+          <van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
+            <van-checkbox :name="item" />
           </van-cell>
         </van-cell-group>
       </van-checkbox-group>
@@ -53,17 +54,17 @@ export default {
   i18n: {
     'zh-CN': {
       checkbox: '复选框',
-      labelDisabled: '禁用 Checkbox 内容部分点击事件',
+      labelDisabled: '禁用内容部分点击事件',
       title3: 'Checkbox 组',
-      title4: '与 Cell 组件一起使用',
-      title5: '设置最大可选数',
+      title4: '设置最大可选数',
+      title5: '与 Cell 组件一起使用'
     },
     'en-US': {
       checkbox: 'Checkbox',
-      labelDisabled: 'Disable Checkbox Label click event',
+      labelDisabled: 'Disable Label click event',
       title3: 'Checkbox Group',
-      title4: 'Inside a Cell',
-      title5: 'Maximum amount of checked options'
+      title4: 'Maximum amount of checked options',
+      title5: 'Inside a Cell'
     }
   },
 
@@ -71,8 +72,6 @@ export default {
     return {
       checkbox1: true,
       checkbox2: true,
-      checkbox3: false,
-      checkbox4: true,
       list: [
         'a',
         'b',
@@ -80,7 +79,7 @@ export default {
       ],
       result: ['a', 'b'],
       result2: [],
-      max: 2
+      result3: []
     };
   }
 };
@@ -95,13 +94,6 @@ export default {
   .van-cell {
     .van-checkbox {
       margin: 0;
-      display: flex;
-      flex-direction: row-reverse;
-
-      &__label {
-        margin: 0;
-        flex: 1;
-      }
     }
   }
 }

docs/demos/views/radio.vue

@@ -17,8 +17,12 @@
     <demo-block :title="$t('title3')">
       <van-radio-group v-model="radio3">
         <van-cell-group>
-          <van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
-          <van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
+          <van-cell :title="$t('radio') + 1" clickable @click="radio3 = '1'">
+            <van-radio name="1" />
+          </van-cell>
+          <van-cell :title="$t('radio') + 2" clickable @click="radio3 = '2'">
+            <van-radio name="2" />
+          </van-cell>
         </van-cell-group>
       </van-radio-group>
     </demo-block>
@@ -61,16 +65,5 @@ export default {
       margin-bottom: 10px;
     }
   }
-
-  .van-cell {
-    .van-radio__input {
-      float: right;
-      position: static;
-    }
-
-    .van-radio__label {
-      margin: 0;
-    }
-  }
 }
 </style>

docs/markdown/en-US/checkbox.md

@@ -12,7 +12,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 #### Basic Usage
 
 ```html
-<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
+<van-checkbox v-model="checked">Checkbox</van-checkbox>
 ```
 
 ```javascript
@@ -28,7 +28,13 @@ export default {
 #### Disabled
 
 ```html
-<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
+```
+
+#### Disable Label click event
+
+```html
+<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
 ```
 
 #### Checkbox Group
@@ -76,8 +82,8 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="item">
-      <van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
+    <van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
+      <van-checkbox :name="item" />
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>

docs/markdown/en-US/radio.md

@@ -44,8 +44,12 @@ export default {
 ```html
 <van-radio-group v-model="radio">
   <van-cell-group>
-    <van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
-    <van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
+    <van-cell :title="Radio 1" clickable @click="radio = '1'">
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell :title="Radio 2" clickable @click="radio = '2'">
+      <van-radio name="2" />
+    </van-cell>
   </van-cell-group>
 </van-radio-group>
 ```

docs/markdown/zh-CN/checkbox.md

@@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 通过`v-model`绑定 checkbox 的勾选状态
 
 ```html
-<van-checkbox v-model="checked">复选框 1</van-checkbox>
+<van-checkbox v-model="checked">复选框</van-checkbox>
 ```
 
 ```javascript
@@ -29,13 +29,15 @@ export default {
 #### 禁用状态
 
 ```html
-<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
 ```
+
 #### 禁用内容部分点击事件
 
 ```html
-<van-checkbox v-model="checked" label-disabled>复选框 3</van-checkbox>
+<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
 ```
+
 #### Checkbox 组
 
 需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
@@ -84,8 +86,8 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="item">
-      <van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
+    <van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
+      <van-checkbox :name="item" />
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>

docs/markdown/zh-CN/radio.md

@@ -46,8 +46,12 @@ export default {
 ```html
 <van-radio-group v-model="radio">
   <van-cell-group>
-    <van-cell><van-radio name="1">单选框 1</van-radio></van-cell>
-    <van-cell><van-radio name="2">单选框 2</van-radio></van-cell>
+    <van-cell :title="单选框 1" clickable @click="radio = '1'">
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell :title="单选框 2" clickable @click="radio = '2'">
+      <van-radio name="2" />
+    </van-cell>
   </van-cell-group>
 </van-radio-group>
 ```