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, {

src/notice-bar/index.js

@@ -2,6 +2,7 @@ import { ref, reactive, nextTick, onActivated, watch } from 'vue';
 import { createNamespace, isDef } from '../utils';
 import { doubleRaf } from '../utils/dom/raf';
 import { useRect } from '../composition/use-rect';
+import { useEventListener } from '@vant/use';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('notice-bar');
@@ -33,6 +34,7 @@ export default createComponent({
   setup(props, { emit, slots }) {
     let wrapWidth = 0;
     let contentWidth = 0;
+    let startTimer;
 
     const wrapRef = ref();
     const contentRef = ref();
@@ -134,7 +136,8 @@ export default createComponent({
 
       reset();
 
-      setTimeout(() => {
+      clearTimeout(startTimer);
+      startTimer = setTimeout(() => {
         if (!wrapRef.value || !contentRef.value || scrollable === false) {
           return;
         }
@@ -155,6 +158,10 @@ export default createComponent({
 
     onActivated(start);
 
+    // fix cache issues with forwards and back history in safari
+    // see: https://guwii.com/cache-issues-with-forwards-and-back-history-in-safari/
+    useEventListener('pageshow', start);
+
     watch([() => props.text, () => props.scrollable], start, {
       immediate: true,
     });

src/style/var.less

@@ -754,6 +754,7 @@
 @tabbar-item-font-size: @font-size-sm;
 @tabbar-item-text-color: @gray-7;
 @tabbar-item-active-color: @blue;
+@tabbar-item-active-background-color: @tabbar-background-color;
 @tabbar-item-line-height: 1;
 @tabbar-item-icon-size: 22px;
 @tabbar-item-margin-bottom: 4px;

src/tabbar-item/index.less

@@ -29,6 +29,7 @@
 
   &--active {
     color: @tabbar-item-active-color;
+    background-color: @tabbar-item-active-background-color;
   }
 
   .van-badge {