NoticeBar: add component && doc

build/bin/build-entry.js

@@ -34,8 +34,7 @@ export {
 };
 export default {
   install,
-  version,
-{{list}}
+  version
 };
 `;
 

components.json

@@ -36,5 +36,6 @@
   "uploader": "./packages/uploader/index.js",
   "swipe": "./packages/swipe/index.js",
   "swipe-item": "./packages/swipe-item/index.js",
-  "datetime-picker": "./packages/datetime-picker/index.js"
+  "datetime-picker": "./packages/datetime-picker/index.js",
+  "notice-bar": "./packages/notice-bar/index.js"
 }

docs/examples-docs/notice-bar.md

@@ -0,0 +1,71 @@
+<style>
+.demo-notice-bar {
+  .van-notice-bar:not(:first-of-type) {
+    margin-top: 15px;
+  }
+}
+</style>
+
+## NoticeBar 通告栏
+
+### 使用指南
+``` javascript
+import { NoticeBar } from 'vant';
+
+Vue.component(NoticeBar.name, NoticeBar);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-notice-bar>
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+```
+:::
+
+#### 禁用滚动
+文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
+
+:::demo 禁用滚动
+```html
+<van-notice-bar :scrollable="false">
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+```
+:::
+
+#### 通告栏模式
+默认模式为空，支持`closeable`和`link`。
+
+:::demo 通告栏模式
+```html
+<!-- closeable 模式，在右侧显示关闭按钮 -->
+<van-notice-bar mode="closeable">
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+
+<!-- link 模式，在右侧显示链接箭头 -->
+<van-notice-bar mode="link">
+  足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
+</van-notice-bar>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| mode | 通告栏模式 | String | `''` | `closeable` `link` |
+| delay | 动画延迟时间，单位秒 | Number | `1` | |
+| scrollable | 是否滚动 | Boolean | `true` | |
+| speed | 滚动速率，单位px | Number | `40` | |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| click | 点击事件回调 | - |

docs/src/ExamplesDocsApp.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script>
-import 'highlight.js/styles/color-brewer.css';
 import docConfig from './doc.config';
 
 export default {

docs/src/doc.config.js

@@ -125,6 +125,10 @@ module.exports = {
               {
                 "path": "/lazyload",
                 "title": "Lazyload 图片懒加载"
+              },
+              {
+                "path": "/notice-bar",
+                "title": "NoticeBar 通告栏"
               }
             ]
           },

docs/src/examples.js

@@ -2,16 +2,16 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesApp';
 import routes from './router.config';
-import ZanUI from 'packages/index';
+import Vant, { Lazyload } from 'packages/index';
 import ZanDoc from 'zan-doc';
 import 'packages/vant-css/src/index.css';
 import 'zan-doc/src/helper/touch-simulator';
 
 import DemoList from './components/demo-list.vue';
 
-Vue.use(ZanUI);
+Vue.use(Vant);
 Vue.use(ZanDoc);
-Vue.use(ZanUI.Lazyload, {
+Vue.use(Lazyload, {
   lazyComponent: true
 });
 Vue.use(VueRouter);

docs/src/index.js

@@ -4,7 +4,7 @@ import App from './ExamplesDocsApp';
 import routes from './router.config';
 import ZanDoc from 'zan-doc';
 import DemoBlock from './components/demo-block';
-import 'packages/vant-css/src/index.css';
+import 'packages/vant-css/src/reset.css';
 
 const isMobile = (function() {
   var platform = navigator.userAgent.toLowerCase();

package.json

@@ -117,6 +117,6 @@
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "^0.2.3"
+    "zan-doc": "^0.2.5"
   }
 }

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;
+  }
+}

yarn.lock

@@ -7959,9 +7959,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.3.tgz#79a8a4b6b5377e5900fd9a37034bb481ab281cf8"
+zan-doc@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.5.tgz#4f82e1b75db1a348b57436cd1d4ffb607bc18562"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"