[new feature] Notice bar support more props (#254)

* [bugfix] CouponList always show empty info

* [bugfix] add click feedback of buttons in components

* [Doc] add custom theme document

* [new feature] Notice bar support more props

* [bugfix] PullRefresh test cases

* [bugfix] unused NoticeBar style

docs/examples-docs/en-US/notice-bar.md

@@ -13,7 +13,10 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 :::demo Basic Usage
 ```html
-<van-notice-bar text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily." />
+<van-notice-bar
+  text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
+  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+/>
 ```
 :::
 
@@ -47,8 +50,12 @@ Vue.component(NoticeBar.name, NoticeBar);
 |-----------|-----------|-----------|-------------|-------------|
 | mode | Mode | String | `''` | `closeable` `link` |
 | delay | Animation delay (s) | Number | `1` | - |
-| speed | Scroll speed (px) | Number | `40` | - |
+| speed | Scroll speed (px) | Number | `50` | - |
 | scrollable | Whether to scroll content | Boolean | `true` | - |
+| leftIcon | Image url of left icon | String | - | - |
+| color | Text color | String | `#f60` | - |
+| background | Background color | String | `#fff7cc` | - |
+
 
 ### Event
 

docs/examples-docs/zh-CN/notice-bar.md

@@ -21,7 +21,10 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 :::demo 基础用法
 ```html
-<van-notice-bar text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" />
+<van-notice-bar
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
+  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+/>
 ```
 :::
 
@@ -59,8 +62,11 @@ Vue.component(NoticeBar.name, NoticeBar);
 |-----------|-----------|-----------|-------------|-------------|
 | mode | 通告栏模式 | String | `''` | `closeable` `link` |
 | delay | 动画延迟时间，单位秒 | Number | `1` | - |
-| speed | 滚动速率，单位px | Number | `40` | - |
+| speed | 滚动速率，单位px | Number | `50` | - |
 | scrollable | 是否滚动 | Boolean | `true` | - |
+| leftIcon | 左侧图标图片链接 | String | - | - |
+| color | 文本颜色 | String | `#f60` | - |
+| background | 滚动条背景 | String | `#fff7cc` | - |
 
 ### Event
 

packages/notice-bar/index.vue

@@ -1,11 +1,19 @@
 <template>
-  <div v-show="showNoticeBar" @click="$emit('click')" :class="['van-notice-bar', { 'van-notice-bar--withicon': mode }]">
+  <div
+    v-show="showNoticeBar"
+    :class="['van-notice-bar', { 'van-notice-bar--withicon': mode }]"
+    :style="barStyle"
+    @click="$emit('click')"
+  >
+    <div class="van-notice-bar__left-icon" v-if="leftIcon">
+      <img :src="leftIcon" />
+    </div>
     <div class="van-notice-bar__content-wrap" ref="contentWrap">
       <div class="van-notice-bar__content" ref="content" :style="contentStyle" @transitionend="onTransitionEnd">
         <slot>{{ text }}</slot>
       </div>
     </div>
-    <van-icon class="van-notice-bar__icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
+    <van-icon class="van-notice-bar__right-icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
   </div>
 </template>
 
@@ -23,6 +31,9 @@ export default {
 
   props: {
     text: String,
+    leftIcon: String,
+    color: String,
+    background: String,
     mode: {
       type: String,
       default: '',
@@ -38,12 +49,13 @@ export default {
     },
     speed: {
       type: Number,
-      default: 40
+      default: 50
     }
   },
 
   data() {
     return {
+      firstRound: true,
       duration: 0,
       offsetWidth: 0,
       showNoticeBar: true,
@@ -55,12 +67,17 @@ export default {
     iconName() {
       return this.mode === 'closeable' ? 'close' : this.mode === 'link' ? 'arrow' : '';
     },
+    barStyle() {
+      return {
+        color: this.color,
+        background: this.background
+      };
+    },
     contentStyle() {
       return {
         transform: `translate3d(${-this.offsetWidth}px, 0, 0)`,
-        transitionDelay: this.delay + 's',
-        transitionDuration: this.duration + 's',
-        transitionProperty: this.diableTransition ? 'none' : 'all'
+        transitionDelay: (this.firstRound ? this.delay : 0) + 's',
+        transitionDuration: this.duration + 's'
       };
     }
   },
@@ -69,6 +86,7 @@ export default {
     const offsetWidth = this.$refs.content.getBoundingClientRect().width;
     const wrapWidth = this.$refs.contentWrap.getBoundingClientRect().width;
     if (this.scrollable && offsetWidth > wrapWidth) {
+      this.wrapWidth = wrapWidth;
       this.offsetWidth = offsetWidth;
       this.duration = (offsetWidth + wrapWidth) / this.speed;
     }
@@ -79,12 +97,14 @@ export default {
       this.showNoticeBar = this.mode !== 'closeable';
     },
     onTransitionEnd() {
-      const { offsetWidth } = this;
-      this.diableTransition = true;
-      this.offsetWidth = 0;
+      const { offsetWidth, wrapWidth } = this;
+      this.firstRound = false;
+      this.duration = 0;
+      this.offsetWidth = -this.wrapWidth;
 
+      // wait for vue render && dom update
       setTimeout(() => {
-        this.diableTransition = false;
+        this.duration = (offsetWidth + 2 * wrapWidth) / this.speed;
         this.offsetWidth = offsetWidth;
       }, 50);
     }

packages/pull-refresh/index.vue

@@ -28,7 +28,7 @@
 
 <script>
 import Loading from '../loading';
-import Utils from '../utils/scroll';
+import scrollUtils from '../utils/scroll';
 
 export default {
   name: 'van-pull-refresh',
@@ -81,6 +81,10 @@ export default {
     }
   },
 
+  mounted() {
+    this.scrollEl = scrollUtils.getScrollEventTarget(this.$el);
+  },
+
   watch: {
     value(val) {
       if (!val) {
@@ -141,7 +145,7 @@ export default {
     },
 
     getCeiling() {
-      this.ceiling = Utils.getScrollTop(Utils.getScrollEventTarget(this.$el)) === 0;
+      this.ceiling = scrollUtils.getScrollTop(this.scrollEl) === 0;
       return this.ceiling;
     },
 

packages/vant-css/src/notice-bar.css

@@ -1,10 +1,12 @@
 @import './common/var.css';
 
 .van-notice-bar {
+  display: flex;
   color: $orange;
   padding: 9px 10px;
   font-size: 12px;
   line-height: 1.5;
+  position: relative;
   background-color: #fff7cc;
 
   &--withicon {
@@ -12,7 +14,19 @@
     padding-right: 30px;
   }
 
-  &__icon {
+  &__left-icon {
+    height: 18px;
+    min-width: 20px;
+    padding-top: 1px;
+    box-sizing: border-box;
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &__right-icon {
     top: 10px;
     right: 10px;
     position: absolute;
@@ -22,6 +36,7 @@
   }
 
   &__content-wrap {
+    flex: 1;
     height: 18px;
     overflow: hidden;
     position: relative;
@@ -30,6 +45,6 @@
   &__content {
     position: absolute;
     white-space: nowrap;
-    transition-timing-function: linear;
+    transition: all linear;
   }
 }

test/unit/specs/pull-refresh.spec.js

@@ -102,7 +102,7 @@ describe('PullRefresh', () => {
       }
     });
 
-    window.scrollY = 100;
+    window.scrollTop = 100;
 
     // ignore touch event when not at page top
     triggerTouch(wrapper, 'touchstart', 0, 0);
@@ -110,7 +110,7 @@ describe('PullRefresh', () => {
     triggerTouch(wrapper, 'touchend', 0, 100);
     expect(wrapper.vm.ceiling).to.be.false;
 
-    window.scrollY = 0;
+    window.scrollTop = 0;
     triggerTouch(wrapper, 'touchmove', 0, 100);
     expect(wrapper.vm.ceiling).to.be.true;
   });