[bugfix] Checkbox: label-position prop not work

docs/markdown/changelog.zh-CN.md

@@ -2,11 +2,19 @@
 
 ### [v2.0.0-beta.4](https://github.com/youzan/vant/tree/v2.0.0-beta.4)
 
+##### Checkbox
+
+- 修复`label-position`不生效的问题
+
 ##### Field
 
 - 新增`click`事件
 - 新增`clickable`属性
 
+##### Radio
+
+- 修复`label-position`不生效的问题
+
 ##### Stepper
 
 - 支持`Number`类型的`input-width`属性

packages/checkbox/index.less

@@ -59,7 +59,6 @@
     line-height: @checkbox-size;
 
     &--left {
-      float: left;
       margin: 0 @checkbox-label-margin 0 0;
     }
 

packages/checkbox/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`label disabled 1`] = `
+<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox">
+  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+      <!----></i></div><span class="van-checkbox__label">Label</span>
+</div>
+`;
+
+exports[`label-position prop 1`] = `
+<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox"><span class="van-checkbox__label van-checkbox__label--left">Label</span>
+  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+      <!----></i></div>
+</div>
+`;

packages/checkbox/test/index.spec.js

@@ -31,8 +31,8 @@ test('disabled', () => {
 
 test('label disabled', () => {
   const wrapper = mount(Checkbox, {
-    slots: {
-      default: '<div />'
+    scopedSlots: {
+      default: () => 'Label'
     },
     propsData: {
       labelDisabled: true
@@ -41,6 +41,7 @@ test('label disabled', () => {
 
   wrapper.find('.van-checkbox__label').trigger('click');
   expect(wrapper.emitted('input')).toBeFalsy();
+  expect(wrapper).toMatchSnapshot();
 });
 
 test('checkbox group', async () => {
@@ -91,3 +92,16 @@ test('click event', () => {
   icon.trigger('click');
   expect(onClick).toHaveBeenCalledTimes(2);
 });
+
+test('label-position prop', () => {
+  const wrapper = mount(Checkbox, {
+    scopedSlots: {
+      default: () => 'Label'
+    },
+    propsData: {
+      labelPosition: 'left'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/mixins/checkbox.js

@@ -62,6 +62,22 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
       </span>
     );
 
+    const Children = [
+      <div
+        class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
+        style={{ fontSize: suffixPx(this.iconSize) }}
+        onClick={this.onClickIcon}
+      >
+        {CheckIcon}
+      </div>
+    ];
+
+    if (this.labelPosition === 'left') {
+      Children.unshift(Label);
+    } else {
+      Children.push(Label);
+    }
+
     return (
       <div
         role={role}
@@ -72,14 +88,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
           this.$emit('click', event);
         }}
       >
-        <div
-          class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
-          style={{ fontSize: suffixPx(this.iconSize) }}
-          onClick={this.onClickIcon}
-        >
-          {CheckIcon}
-        </div>
-        {Label}
+        {Children}
       </div>
     );
   }

packages/radio/index.less

@@ -59,7 +59,6 @@
     line-height: @radio-size;
 
     &--left {
-      float: left;
       margin: 0 @radio-label-margin 0 0;
     }