NoticeBar: add component && doc

packages/index.js

@@ -36,6 +36,7 @@ import Uploader from './uploader';
 import Swipe from './swipe';
 import SwipeItem from './swipe-item';
 import DatetimePicker from './datetime-picker';
+import NoticeBar from './notice-bar';
 
 const version = '0.8.6';
 const components = [
@@ -71,7 +72,8 @@ const components = [
   Uploader,
   Swipe,
   SwipeItem,
-  DatetimePicker
+  DatetimePicker,
+  NoticeBar
 ];
 
 const install = function(Vue) {
@@ -127,47 +129,10 @@ export {
   Uploader,
   Swipe,
   SwipeItem,
-  DatetimePicker
+  DatetimePicker,
+  NoticeBar
 };
 export default {
   install,
-  version,
-  Button,
-  Switch,
-  Field,
-  Radio,
-  Cell,
-  Icon,
-  CellGroup,
-  CellSwipe,
-  Popup,
-  Dialog,
-  Picker,
-  RadioGroup,
-  Waterfall,
-  Loading,
-  Panel,
-  Card,
-  Steps,
-  Tag,
-  Checkbox,
-  CheckboxGroup,
-  BadgeGroup,
-  Badge,
-  Search,
-  Step,
-  Tabs,
-  Tab,
-  Lazyload,
-  ImagePreview,
-  Col,
-  Row,
-  Actionsheet,
-  Quantity,
-  Progress,
-  Toast,
-  Uploader,
-  Swipe,
-  SwipeItem,
-  DatetimePicker
+  version
 };

packages/notice-bar/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div v-show="showNoticeBar" @click="$emit('click')" :class="['van-notice-bar', { 'van-notice-bar--withicon': mode }]">
+    <div class="van-notice-bar__content-wrap" ref="contentWrap">
+      <div class="van-notice-bar__content" ref="content" :style="contentStyle" @transitionend="onTransitionEnd">
+        <slot></slot>
+      </div>
+    </div>
+    <van-icon class="van-notice-bar__icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+
+const NOTICE_BAR_MODE = ['', 'closeable', 'link'];
+
+export default {
+  name: 'van-notice-bar',
+
+  components: {
+    [Icon.name]: Icon
+  },
+
+  props: {
+    mode: {
+      type: String,
+      default: '',
+      validator: val => NOTICE_BAR_MODE.indexOf(val) !== -1
+    },
+    delay: {
+      type: [String, Number],
+      default: 1
+    },
+    scrollable: {
+      type: Boolean,
+      default: true
+    },
+    speed: {
+      type: Number,
+      default: 40
+    }
+  },
+
+  data() {
+    return {
+      duration: 0,
+      offsetWidth: 0,
+      showNoticeBar: true,
+      diableTransition: false
+    };
+  },
+
+  computed: {
+    iconName() {
+      return this.mode === 'closeable' ? 'close' : this.mode === 'link' ? 'arrow' : '';
+    },
+    contentStyle() {
+      return {
+        left: -this.offsetWidth + 'px',
+        transitionDelay: this.delay + 's',
+        transitionDuration: this.duration + 's',
+        transitionProperty: this.diableTransition ? 'none' : 'left'
+      };
+    }
+  },
+
+  mounted() {
+    const offsetWidth = this.$refs.content.getBoundingClientRect().width;
+    const wrapWidth = this.$refs.contentWrap.getBoundingClientRect().width;
+    if (this.scrollable && offsetWidth > wrapWidth) {
+      this.offsetWidth = offsetWidth;
+      this.duration = Math.ceil((offsetWidth + wrapWidth) / this.speed);
+    }
+  },
+
+  methods: {
+    onClickIcon() {
+      this.showNoticeBar = this.mode !== 'closeable';
+    },
+    onTransitionEnd() {
+      const { offsetWidth } = this;
+      this.diableTransition = true;
+      this.offsetWidth = 0;
+
+      setTimeout(() => {
+        this.diableTransition = false;
+        this.offsetWidth = offsetWidth;
+      }, 50);
+    }
+  }
+};
+</script>

packages/vant-css/src/index.css

@@ -30,3 +30,4 @@
 @import './toast.css';
 @import './uploader.css';
 @import './swipe.css';
+@import './notice-bar.css';

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

@@ -0,0 +1,36 @@
+@import './common/var.css';
+
+.van-notice-bar {
+  color: #f60;
+  padding: 9px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  background-color: #fff7cc;
+
+  &--withicon {
+    position: relative;
+    padding-right: 30px;
+  }
+
+  &__icon {
+    top: 10px;
+    right: 10px;
+    position: absolute;
+    font-size: 15px;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  &__content-wrap {
+    height: 18px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__content {
+    position: absolute;
+    white-space: nowrap;
+    transition-property: left;
+    transition-timing-function: linear;
+  }
+}