Merge branch 'dev' into next

src/button/README.md

@@ -112,6 +112,7 @@ app.use(Button);
 | color | Color, support linear-gradient | _string_ | - |
 | icon | Left Icon | _string_ | - |
 | icon-prefix `v2.6.0` | Icon className prefix | _string_ | `van-icon` |
+| icon-position `v2.10.7` | Icon position, can be set to `right` | `left` |
 | tag | HTML Tag | _string_ | `button` |
 | native-type | Native Type Attribute | _string_ | `''` |
 | plain | Whether to be plain button | _boolean_ | `false` |

src/button/README.zh-CN.md

@@ -134,7 +134,8 @@ app.use(Button);
 | color | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
 | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
-| tag | 根节点的 HTML 标签 | _string_ | `button` |
+| icon-position `v2.10.7` | 图标展示位置，可选值为 `right` | `left` |
+| tag | 按钮根节点的 HTML 标签 | _string_ | `button` |
 | native-type | 原生 button 标签的 type 属性 | _string_ | - |
 | block | 是否为块级元素 | _boolean_ | `false` |
 | plain | 是否为朴素按钮 | _boolean_ | `false` |

src/button/index.js

@@ -42,6 +42,10 @@ export default createComponent({
       type: String,
       default: '20px',
     },
+    iconPosition: {
+      type: String,
+      default: 'left',
+    },
   },
 
   emits: ['click'],
@@ -136,6 +140,7 @@ export default createComponent({
         disabled,
         hairline,
         nativeType,
+        iconPosition,
       } = props;
 
       const classes = [
@@ -164,8 +169,9 @@ export default createComponent({
           onClick={onClick}
         >
           <div class={bem('content')}>
-            {renderIcon()}
+            {iconPosition === 'left' && renderIcon()}
             {renderText()}
+            {iconPosition === 'right' && renderIcon()}
           </div>
         </tag>
       );

src/button/index.less

@@ -160,8 +160,10 @@
   }
 
   &__icon + &__text,
-  &__loading + &__text {
-    margin-left: 5px;
+  &__loading + &__text,
+  &__text + &__icon,
+  &__text + &__loading {
+    margin-left: @padding-base;
   }
 
   &--hairline {

src/button/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`icon-position prop 1`] = `
+<button class="van-button van-button--default van-button--normal">
+  <div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
+      <!----></i></div>
+</button>
+`;
+
 exports[`icon-prefix prop 1`] = `
 <button class="van-button van-button--default van-button--normal">
   <div class="van-button__content"><i class="my-icon my-icon-success van-button__icon">

src/button/test/index.spec.js

@@ -11,6 +11,16 @@ test('loading-size prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('icon-position prop', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      icon: 'plus',
+      iconPosition: 'right',
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('click event', () => {
   const onClick = jest.fn();
   const wrapper = mount(Button, {