fix: noticeBar

src/packages/icon/icon.vue

@@ -1,8 +1,30 @@
 <template>
-  <i :class="['nut-icon', 'nut-icon-' + type]" v-html="icon" :style="{ height: size, width: size, color: color }"> </i>
+  <i
+    :class="['nut-icon', 'nut-icon-' + type]"
+    v-html="icon"
+    :style="{ height: size, width: size, color: color }"
+  ></i>
 </template>
 <script>
-const types = ['top', 'action', 'cross', 'down', 'right', 'more', 'plus', 'search', 'trolley', 'tick', 'minus', 'circle-cross', 'avatar', 'nav', 'star', 'set'];
+const types = [
+  'top',
+  'action',
+  'cross',
+  'down',
+  'right',
+  'more',
+  'plus',
+  'search',
+  'trolley',
+  'tick',
+  'minus',
+  'circle-cross',
+  'avatar',
+  'nav',
+  'star',
+  'set',
+  'notice'
+];
 
 export default {
   name: 'nut-icon',

src/packages/noticebar/demo.vue

@@ -1,18 +1,33 @@
 <template>
   <div class="demo-list">
-    <h4>默认用法</h4>
+    <h4>基本用法</h4>
     <nut-noticebar text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"></nut-noticebar>
+    <h4>可关闭信息</h4>
+    <nut-noticebar
+      :closeMode="true"
+      @click="handleClick"
+      @close="close"
+    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！</nut-noticebar>
+    <h4>可折行信息</h4>
+    <nut-noticebar
+      :wrapable="true"
+      :scrollable="false"
+      leftIcon="close"
+    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！</nut-noticebar>
+    <h4>带 icon 的消息</h4>
+    <nut-noticebar
+      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+    ></nut-noticebar>
     <h4>禁用滚动</h4>
     <nut-noticebar
       text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
       :scrollable="false"
     ></nut-noticebar>
-    <h4>通告栏模式--关闭模式</h4>
-    <nut-noticebar :closeMode="true" @click="hello"
-      >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
-    </nut-noticebar>
-    <h4>通告栏模式--链接模式</h4>
-    <nut-noticebar left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png">
+    <h4>自定义颜色</h4>
+    <nut-noticebar text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！" color="red"></nut-noticebar>
+    <h4>链接模式</h4>
+    <nut-noticebar>
       <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>
   </div>
@@ -21,8 +36,11 @@
 <script>
 export default {
   methods: {
-    hello() {
-      console.log('hello world');
+    handleClick(e) {
+      console.log('click', e);
+    },
+    close(e) {
+      console.log('close', e);
     }
   }
 };

src/packages/noticebar/doc.md

@@ -7,6 +7,21 @@
       text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
     ></nut-noticebar>
 ```
+## 可关闭信息
+```html
+    <nut-noticebar
+      :close-mode="true"
+      @click="hello"
+    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+    </nut-noticebar>
+```
+## 带 icon 的消息
+```html
+    <nut-noticebar
+      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+    </nut-noticebar>
+```
 ## 禁用滚动
 文字内容多于一行时，可通过scrollable参数控制是否开启滚动
 ```html
@@ -15,15 +30,16 @@
       :scrollable="false"
     ></nut-noticebar>
 ```
-## 通告栏模式--关闭模式
+## 自定义颜色
 ```html
     <nut-noticebar
-      :closeMode="true"
-      @click="hello"
-    >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+      color="red"
+    >
+      <a href="https://www.jd.com">京东商城</a>
     </nut-noticebar>
 ```
-## 通告栏模式--链接模式
+## 链接模式
 ```html
     <nut-noticebar
       left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
@@ -39,16 +55,18 @@
 | 字段       | 说明                                                       | 类型          | 默认值 |
 | ---------- | ---------------------------------------------------------- | ------------- | ------ |
 | text       | 提示的信息                                                 | String        | 空     |
-| closeMode  | 是否启用关闭模式                                           | Boolean       | false  |
-| leftIcon   | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | String        | 空     |
+| close-mode | 是否启用关闭模式                                           | Boolean       | false  |
+| left-icon  | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | String        | 空     |
 | color      | 导航栏的文字颜色                                           | String        | 空     |
 | background | 导航栏的背景颜色                                           | String        | 空     |
 | delay      | 延时多少秒                                                 | String/Number | 1      |
 | scrollable | 是否可以滚动                                               | Boolean       | true   |
-| speed      | 移动375px需要用的时间                                      | Number        | 6      |
+| speed      | 滚动速率 (px/s)                                            | Number        | 50     |
+| wrapable   | 是否开启文本换行，只在禁用滚动时生效                       | Boolean       | false  |
 
 ## Event
 
-| 字段  | 说明             | 回调参数 |
-| ----- | ---------------- | -------- |
-| click | 外层点击事件回调 | 无       |
+| 字段  | 说明             | 回调参数     |
+| ----- | ---------------- | ------------ |
+| click | 外层点击事件回调 | event: Event |
+| close | 关闭通知栏时触发 | event: Event |

src/packages/scroller/demo.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="demo-list">
-    <nut-noticebar :closeMode="true" v-if="!isMobile"
-      >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar
-    >
+    <nut-noticebar
+      :closeMode="true"
+      v-if="!isMobile"
+    >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
     <h4>横向滑动</h4>
     <p>支持惯性和吸边回弹，支持滑动到底跳转链接。</p>
-    <p><nut-button type="light" shape="circle" small @click="scrollToPosHor()">返回第一个</nut-button></p>
+    <p>
+      <nut-button type="light" shape="circle" size="small" @click="scrollToPosHor()">返回第一个</nut-button>
+    </p>
     <div class="hor-panel">
       <nut-scroller @jump="jump()" @scrollToCbk="scrollToCbkHor" :scrollTo="scrollToHor">
         <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
@@ -14,7 +17,9 @@
             <dd>2018-02-25</dd>
           </dl>
         </div>
-        <slot slot="more"><div class="nut-hor-jump-more">查看更多</div></slot>
+        <slot slot="more">
+          <div class="nut-hor-jump-more">查看更多</div>
+        </slot>
       </nut-scroller>
     </div>
     <h4>横向小于一屏</h4>
@@ -30,7 +35,9 @@
     </div>
     <h4>纵向滑动</h4>
     <p>支持下拉刷新、上拉加载更多。</p>
-    <p><nut-button type="light" shape="circle" small @click="scrollToPos()">返回列表顶部</nut-button></p>
+    <p>
+      <nut-button type="light" shape="circle" size="small" @click="scrollToPos()">返回列表顶部</nut-button>
+    </p>
     <div class="vert-panel">
       <nut-scroller
         :is-un-more="isUnMore1"
@@ -56,7 +63,13 @@
     <h4>纵向不满一屏</h4>
     <p>支持下拉刷新、上拉加载更多。</p>
     <div class="vert-panel">
-      <nut-scroller :is-un-more="isUnMore2" :is-loading="isLoading2" :type="'vertical'" @loadMore="loadMoreVert2" @pulldown="pulldown2">
+      <nut-scroller
+        :is-un-more="isUnMore2"
+        :is-loading="isLoading2"
+        :type="'vertical'"
+        @loadMore="loadMoreVert2"
+        @pulldown="pulldown2"
+      >
         <div slot="list" class="nut-vert-list-panel">
           <div class="nut-vert-list-item" v-for="(item, index) of listData2" :key="index">
             <dl class="nut-scroller-item-info">