fix: noticebar在小程序中不能运行问题修改 (#1994)

* fix: popover

* fix: 代码回退

* feat: 文档修改

* feat: 修改Imagepreview

* feat: imagepreview文案修改

* feat: noticebar文案修改

* fix: noticebar小程序不能运行问题修改

src/packages/__VUE/imagepreview/doc.en-US.md

@@ -298,36 +298,36 @@ app.use(ImagePreview);
     
 ### Props
 
-| Attribute | Description | Type | Default
-|----- | ----- | ----- | ----- 
-| show | Whether to show preview | Boolean | false
-| videos | Videos Array(Videos are before images, not support in taro) |  VideoArray[] | []
-| images | Images array | ImageArray[] | []
-| autoplay | Autoplay time, zero means not autoplay | Number、String  | 3000  |
-| init-no | Init no | Number | 1
-| pagination-visible | Whether to show pagination    | Boolean | false |
-| pagination-color   | Pagination color    | String  | '#fff'  |
-| content-close   | Click image to exit preview    | Boolean  | false  |
-| show-index   | Whether to show index    | Boolean  | true  |
-| closeable   | Whether to show close icon    | Boolean  | false  |
-| close-icon-position   |  Close icon position,can be set to `top-left`   | String  | ‘top-right’  |  
+| Attribute | Description | Type | Default |
+|----- | ----- | ----- | ----- |
+| show | Whether to show preview | boolean | `false` |
+| videos | Videos Array(Videos are before images, not support in taro) |  VideoArray[] | `[]` |
+| images | Images array | ImageArray[] | `[]` |
+| autoplay | Autoplay time, zero means not autoplay | number \| string  | `3000`  |
+| init-no | Init no | number | `1` |
+| pagination-visible | Whether to show pagination    | boolean | `false` |
+| pagination-color   | Pagination color    | string  | `#fff`  |
+| content-close   | Click image to exit preview    | boolean  | `false`  |
+| show-index   | Whether to show index    | boolean  | `true`  |
+| closeable   | Whether to show close icon    | boolean  | `false`  |
+| close-icon-position   |  Close icon position,can be set to `top-left`   | string  | `top-right`  |  
 | before-close  | Callback function before close   | (active: number) => boolean | Promise<`boolean`>  | -  | 
-| max-zoom  | Max zoom`Taro isn't supported`   | Number  | 3  | 
-| min-zoom  | Min zoom`Taro isn't supported`   | Number  | 1/3  | 
-| is-Loop  | Whether to loop   | Boolean  | `true`  | 
+| max-zoom  | Max zoom`Taro isn't supported`   | number  | `3`  | 
+| min-zoom  | Min zoom`Taro isn't supported`   | number  | `1/3`  | 
+| is-Loop  | Whether to loop   | boolean  | `true`  | 
 
 ### Data Structure of ImageArray 
 
 | Key | Description | Type | 
 |----- | ----- | ----- | 
-| src | img url | String | 
+| src | img url | string | 
 
 ### Data Structure of VideoArray
 
 | Key | Description | Type | 
 |----- | ----- | ----- | 
-| source | Video url and type settings | Object | 
-| options | Control video playback properties| Object | 
+| source | Video url and type settings | `object` | 
+| options | Control video playback properties| `object` | 
     
 ### Events
 

src/packages/__VUE/imagepreview/doc.md

@@ -166,7 +166,6 @@ app.use(ImagePreview);
 :::
 
 ### 视频、图片预览
-#### taro 场景暂不支持视频预览功能
 
 :::demo
 ```html
@@ -243,7 +242,6 @@ app.use(ImagePreview);
 :::
                 
 ### 函数式调用
-#### taro 场景暂不支持此功能
 
 :::demo
 ```html
@@ -297,38 +295,38 @@ app.use(ImagePreview);
 :::
 ## API
 ### Props
-
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| show | 是否展示预览图片 | Boolean | false
-| videos | 预览的视频数组（视频自动放到图片之前、taro场景暂不支持） | VideoArray[] | []
-| images | 预览图片数组 | ImageArray[] | []
-| autoplay | 自动轮播时长，0表示不会自动轮播 | Number、String  | 3000  |
-| init-no | 初始页码 | Number | 1
-| pagination-visible | 分页指示器是否展示    | Boolean | false |
-| pagination-color   | 分页指示器选中的颜色    | String  | '#fff'  |
-| content-close   | 点击图片可以退出预览    | Boolean  | false  |
-| show-index  | 是否显示页码    | Boolean  | true  |
-| closeable  | 是否显示关闭图标    | Boolean  | false  |
-| close-icon-position   | 关闭图标位置，可选值：top-left   | String  | ‘top-right’  |  
+ 
+| 字段 | 说明 | 类型 | 默认值 | 
+|----- | ----- | ----- | ----- |
+| show | 是否展示预览图片 | boolean | `false` |
+| videos | 预览的视频数组（视频自动放到图片之前） | VideoArray[] | `[]` |
+| images | 预览图片数组 | ImageArray[] | `[]` |
+| autoplay | 自动轮播时长，0表示不会自动轮播 | number \| string  |`3000`  |
+| init-no | 初始页码 | number | `1` |
+| pagination-visible | 分页指示器是否展示    | boolean | `false` |
+| pagination-color   | 分页指示器选中的颜色    | string  | `#fff`  |
+| content-close   | 点击图片可以退出预览    | boolean  | `false`  |
+| show-index  | 是否显示页码    | boolean  | `true`  |
+| closeable  | 是否显示关闭图标    | boolean  | `false`  |
+| close-icon-position   | 关闭图标位置，可选值：top-left   | string  | `top-right`  |  
 | before-close  | 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise   | (active: number) => boolean | Promise<`boolean`>  | -  | 
-| max-zoom  | 手势缩放时，最大缩放比例`小程序暂不支持`   | Number  | 3  | 
-| min-zoom  | 手势缩放时，最小缩放比例`小程序暂不支持`   | Number  | 1/3  | 
-| is-Loop  | 是否循环播放   | Boolean  | `true`  | 
+| max-zoom  | 手势缩放时，最大缩放比例  | number  | `3`  | 
+| min-zoom  | 手势缩放时，最小缩放比例   | number  | `1/3`  | 
+| is-loop  | 是否循环播放   | boolean  | `true`  | 
 
 
 ### ImageArray 数据结构
 
 | 键名 | 说明 | 类型 | 
 |----- | ----- | ----- | 
-| src | 预览图片链接 | String | 
+| src | 预览图片链接 | `string` | 
 
 ### VideoArray 数据结构
 
 | 键名 | 说明 | 类型 | 
 |----- | ----- | ----- | 
-| source | 视频地址和类型设置，等同于 Video 组件的 [source 属性](#/zh-CN/video) | Object | 
-| options | 控制视频播放属性，等同于 Video 组件的 [options 属性](#/zh-CN/video) | Object | 
+| source | 视频地址和类型设置，等同于 Video 组件的 [source 属性](#/zh-CN/video) | `object` | 
+| options | 控制视频播放属性，等同于 Video 组件的 [options 属性](#/zh-CN/video) | `object` | 
 
 
 

src/packages/__VUE/imagepreview/doc.taro.md

@@ -1,4 +1,215 @@
 # ImagePreview 图片预览
 
+### 介绍
+    
+支持全屏预览视频和图片，可函数式调用
 
-#### 直接使用 Taro 现有 previewImage 组件开发 [参考文档](https://docs.taro.zone/docs/apis/media/image/previewImage)
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { ImagePreview } from '@nutui/nutui';
+
+const app = createApp();
+app.use(ImagePreview);
+```
+
+### 基础用法
+:::demo
+```html
+<template>
+    <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn"/>
+    <nut-cell isLink title="展示图片预览" :showIcon="true" @click="showFn"></nut-cell>
+</template>
+
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+        const resData = reactive({
+            showPreview: false,
+            imgData: [
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
+                },
+            ]
+        });
+
+        const showFn = () => {
+            resData.showPreview = true;
+        }
+
+        const hideFn = () => {
+            resData.showPreview = false;
+        }
+        
+        return {
+            ...toRefs(resData),
+            showFn,
+            hideFn
+        };
+    }
+  };
+</script>
+```
+:::
+
+### 设置初始页码
+:::demo
+```html
+<template>
+    <nut-image-preview :show="showPreview" :images="imgData" :content-close="true" :init-no="3" @close="hideFn"/>
+    <nut-cell isLink title="设置初始页码的图片预览" :showIcon="true" @click="showFn"></nut-cell>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+        const resData = reactive({
+            showPreview: false,
+            imgData: [
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
+                },
+            ]
+        });
+
+        const showFn = () => {
+            resData.showPreview = true;
+        }
+
+        const hideFn = () => {
+            resData.showPreview = false;
+        }
+        
+        return {
+            ...toRefs(resData),
+            showFn,
+            hideFn
+        };
+    }
+  };
+</script>
+```
+:::
+
+### 设置轮播指示器及颜色
+:::demo
+```html
+<template>
+    <nut-image-preview
+        :show="showPreview"
+        :images="imgData"
+        :pagination-visible="true"
+        pagination-color="red"
+        @close="hideFn"
+    />
+    <nut-cell isLink title="设置轮播指示器及颜色" :showIcon="true" @click="showFn"></nut-cell>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+        const resData = reactive({
+            showPreview: false,
+            imgData: [
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg',
+                },
+                {
+                    src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg',
+                },
+            ]
+        });
+
+        const showFn = () => {
+            resData.showPreview = true;
+        }
+
+        const hideFn = () => {
+            resData.showPreview = false;
+        }
+        
+        return {
+            ...toRefs(resData),
+            showFn,
+            hideFn
+        };
+    }
+  };
+</script>
+```
+:::
+
+
+## API
+### Props
+
+| 字段 | 说明 | 类型 | 默认值 | 
+|----- | ----- | ----- | ----- |
+| show | 是否展示预览图片 | boolean | `false` |
+| images | 预览图片数组 | ImageArray[] | `[]` |
+| autoplay | 自动轮播时长，0表示不会自动轮播 | number \| string  | `3000`  |
+| init-no | 初始页码 | number | `1` |
+| pagination-visible | 分页指示器是否展示    | boolean | `false` |
+| pagination-color   | 分页指示器选中的颜色    | string  | `#fff`  |
+| content-close   | 点击图片可以退出预览    | boolean  | `false`  |
+| show-index  | 是否显示页码    | boolean  | `true`  |
+| closeable  | 是否显示关闭图标    | boolean  | `false`  |
+| close-icon-position   | 关闭图标位置，可选值：top-left   | string  | `top-right`  |  
+| before-close  | 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise   | (active: number) => boolean | Promise<`boolean`>  | -  | 
+| is-Loop  | 是否循环播放   | boolean  | `true`  | 
+
+
+### ImageArray 数据结构
+
+| 键名 | 说明 | 类型 | 
+|----- | ----- | ----- | 
+| src | 预览图片链接 | `string` | 
+
+### VideoArray 数据结构
+
+| 键名 | 说明 | 类型 | 
+|----- | ----- | ----- | 
+| source | 视频地址和类型设置，等同于 Video 组件的 [source 属性](#/zh-CN/video) | `object`| 
+| options | 控制视频播放属性，等同于 Video 组件的 [options 属性](#/zh-CN/video) | `object` | 
+
+
+
+### Events
+
+|字段|说明|回调参数|
+|--|--|--|
+|close|点击遮罩关闭图片预览时触发|无|
+|change|切换图片时触发| index:当前图片索引|
+
+### Slots
+
+|事件名|说明|
+|--|--|
+|closeIcon| 自定义关闭图片|
+    

src/packages/__VUE/infiniteloading/doc.en-US.md

@@ -102,12 +102,12 @@ Scrolling to the bottom of the list automatically loads more data.
 
 | Attribute        | Description                                                                                                        | Type    | Default          |
 |------------------|--------------------------------------------------------------------------------------------------------------------|---------|------------------|
-| v-model          | Loading status                                                                                                     | Boolean | `false`           |
-| has-more         | Has more data                                                                                                      | Boolean | `true`           |
-| threshold        | The loadMore event will be Emitted when the distance between the scrollbar and the bottom is less than threshold   | Number  | `200`            |
-| use-capture      | Whether to use capture mode                                                                                        | Boolean | `false`          |
-| load-more-txt    | "No more" text                                                                                                     | String  | 'Oops, this is the bottom'|
-| load-txt         | Pull on loading text                                                                                                | String  | `Loading...`      |
+| v-model          | Loading status                                                                                                     | boolean | `false`           |
+| has-more         | Has more data                                                                                                      | boolean | `true`           |
+| threshold        | The loadMore event will be Emitted when the distance between the scrollbar and the bottom is less than threshold   | number  | `200`            |
+| use-capture      | Whether to use capture mode                                                                                        | boolean | `false`          |
+| load-more-txt    | "No more" text                                                                                                     | string  | `Oops, this is the bottom`|
+| load-txt         | Pull on loading text                                                                                                | string  | `Loading...`      |
 
 ### Events
 
@@ -131,6 +131,6 @@ Scrolling to the bottom of the list automatically loads more data.
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
 
-| Name | Default Value | Description |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-infiniteloading-bottom-color       | _#c8c8c8_        | -    |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- | 
+| --nut-infiniteloading-bottom-color       | _#c8c8c8_        | 

src/packages/__VUE/infiniteloading/doc.md

@@ -104,12 +104,12 @@
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| v-model         | 是否触发滚动加载               | Boolean | `false`                |
-| has-more         | 是否还有更多数据               | Boolean | `true`                |
-| threshold         | 滚动条与底部距离小于 threshold 时触发 loadMore 事件 | Number | `200`               |
-| use-capture          | 是否使用捕获模式 true 捕获 false 冒泡                        | Boolean | `false`            |
-| load-more-txt          | “没有更多数”据展示文案                        | String | `'哎呀，这里是底部了啦'`            |
-| load-txt        | 上拉加载提示文案                         | String | `加载中...`                |
+| v-model         | 是否触发滚动加载               | boolean | `false`                |
+| has-more         | 是否还有更多数据               | boolean | `true`                |
+| threshold         | 滚动条与底部距离小于 threshold 时触发 loadMore 事件 | number | `200`               |
+| use-capture          | 是否使用捕获模式 true 捕获 false 冒泡                        | boolean | `false`            |
+| load-more-txt          | “没有更多数”据展示文案                        | string | `'哎呀，这里是底部了啦'`            |
+| load-txt        | 上拉加载提示文案                         | string | `加载中...`                |
 
 ### Events
 
@@ -134,6 +134,6 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-infiniteloading-bottom-color       | _#c8c8c8_        | -    |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-infiniteloading-bottom-color       | _#c8c8c8_        | 

src/packages/__VUE/noticebar/demo.vue

@@ -27,6 +27,7 @@
     <nut-noticebar :text="translate('text')" wrapable></nut-noticebar>
 
     <h2>{{ translate('vertical') }}</h2>
+
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
@@ -155,10 +156,10 @@ export default createDemo({
 .demo {
   padding-bottom: 30px !important;
 
-  // .interstroll-list {
-  //   padding: 0 10px;
-  //   background: rgba(251, 248, 220, 1);
-  //   color: #d9500b;
-  // }
+  .interstroll-list {
+    padding: 0 10px;
+    background: rgba(251, 248, 220, 1);
+    color: #d9500b;
+  }
 }
 </style>

src/packages/__VUE/noticebar/doc.en-US.md

@@ -221,28 +221,27 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 | Attribute  | Description                                        | Type          | Default |
 | ---------- | ---------------------------------------------------| ------------- | ------- |
-| direction  | Rolling direction                                  | String        | across  |
-| text       | Notice text content                                | String        |  -      |
-| close-mode  | Whether to enable the off mode                     | Boolean       | false   |
-| left-icon   | Left Icon                                          | String        | -       |
-| right-icon  | Right Icon                                         | String        | -       |
-| color      | Text Color                                         | String        | -       |
-| background | Background                                         | String        | -       |
-| delay      | Delay time                                         | string \| number | 1       |
-| scrollable | Whether to scroll content                          | Boolean       | true    |
-| speed      | Scrolling speed (px/s)                             | Number         | 50      |
-| wrapable | Whether to enable text wrap                        | Boolean       | false    |
+| direction  | Rolling direction                                  | string        | `across`  |
+| text       | Notice text content                                | string        |  -      |
+| close-mode  | Whether to enable the off mode                     | boolean       | `false`   |
+| left-icon   | Left Icon                                          | string        | -       |
+| color      | Text Color                                         | string        | -       |
+| background | Background                                         | string        | -       |
+| delay      | Delay time                                         | string \| number | `1`       |
+| scrollable | Whether to scroll content                          | boolean       | `true`    |
+| speed      | Scrolling speed (px/s)                             | number         | `50`     |
+| wrapable | Whether to enable text wrap                        | boolean       | `false`    |
 
 ### Props（direction=vertical）
 
 | Attribute    | Description                             | Type     | Default          |
 |--------------|-----------------------------------------|----------|------------------|
-| list         | List                                    | Array    | []               |
-| speed        | Scrolling speed                         | Number   | 50               |
-| stand-time    | Show time(millisecond)                  | Number   | 1000             |
-| complex-am    | Complex animation                       | Boolean  | false            |
-| height       | height                                  | Number   | 40               |
-| close-mode    | Whether to enable the off mode          | Boolean  | false            |
+| list         | List                                    | array    | `[]`               |
+| speed        | Scrolling speed                         | number   | `50`               |
+| stand-time    | Show time(millisecond)                  | number   | `1000`             |
+| complex-am    | Complex animation                       | boolean  | `false`            |
+| height       | height                                  | number   | `40`               |
+| close-mode    | Whether to enable the off mode          | boolean  | `false`            |
 
 ### Slots
 
@@ -265,16 +264,16 @@ When text is long, you can enable multi-line display by setting the wrapable pro
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
 
-| Name | Default Value | Description |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-noticebar-background| _rgba(251, 248, 220, 1)_ | -  |
-| --nut-noticebar-color| _#d9500b_ | -  |
-| --nut-noticebar-font-size| _14px_ | -  |
-| --nut-noticebar-height| _40px_ | -  |
-| --nut-noticebar-line-height| _24px_ | -  |
-| --nut-noticebar-left-icon-width| _16px_ | -  |
-| --nut-noticebar-right-icon-width| _16px_ | -  |
-| --nut-noticebar-box-padding| _0 16px_ | -  |
-| --nut-noticebar-wrapable-padding| _16px_ | -  |
-| --nut-noticebar-lefticon-margin| _0px 10px_ | -  |
-| --nut-noticebar-righticon-margin| _0px 10px_ | -  |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- | 
+| --nut-noticebar-background| _rgba(251, 248, 220, 1)_ |
+| --nut-noticebar-color| _#d9500b_ |
+| --nut-noticebar-font-size| _14px_ |
+| --nut-noticebar-height| _40px_ |
+| --nut-noticebar-line-height| _24px_ |
+| --nut-noticebar-left-icon-width| _16px_ |
+| --nut-noticebar-right-icon-width| _16px_ |
+| --nut-noticebar-box-padding| _0 16px_ |
+| --nut-noticebar-wrapable-padding| _16px_ |
+| --nut-noticebar-lefticon-margin| _0px 10px_ |
+| --nut-noticebar-righticon-margin| _0px 10px_ |

src/packages/__VUE/noticebar/doc.md

@@ -223,28 +223,27 @@ app.use(Noticebar);
 
 | 字段       | 说明                                                       | 类型          | 默认值 |
 | ---------- | ---------------------------------------------------------- | ------------- | ------ |
-| direction       | 滚动的方向，可选 across、vertical                         | String        | across     |
-| text       | 提示的信息                                                 | String        | 空     |
-| close-mode  | 是否启用关闭模式                                           | Boolean       | false  |
-| left-icon   | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | String        | 空     |
-| right-icon   | closeMode 模式下，默认为 ‘close’,其他模式下，没有为默认图片 | String        | 空     |
-| color      | 导航栏的文字颜色                                           | String        | 空     |
-| background | 导航栏的背景颜色                                           | String        | 空     |
-| delay      | 延时多少秒                                                 | string \| number | 1      |
-| scrollable | 是否可以滚动                                               | Boolean       | true   |
-| speed      | 滚动速率 (px/s)                                            | Number        | 50     |
-| wrapable  | 是否开启文本换行                                           | Boolean       | false    |
+| direction       | 滚动的方向，可选 across、vertical                         | string        | `across`     |
+| text       | 提示的信息                                                 | string        | -     |
+| close-mode  | 是否启用关闭模式                                           | boolean       | `false`  |
+| left-icon   | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | string        | -     |
+| color      | 导航栏的文字颜色                                           | string        | -     |
+| background | 导航栏的背景颜色                                           | string        | -     |
+| delay      | 延时多少秒                                                 | string \| number | `1`      |
+| scrollable | 是否可以滚动                                               | boolean       | `true`   |
+| speed      | 滚动速率 (px/s)                                            | number        | `50`     |
+| wrapable  | 是否开启文本换行                                           | boolean       | `false`    |
 
 ### Props（direction=vertical）
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| list         | 纵向滚动数据列表               | Array | []               |
-| speed        | 滚动的速度                         | Number | 50               |
-| stand-time         | 停留时间(毫秒) | Number | 1000                |
-| complex-am | 稍复杂的动画，耗能会高     | Boolean | false |
-| height          | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值                 | Number | 40              |
-| close-mode  | 是否启用右侧关闭图标，可以通过slot[name=rightIcon]自定义图标                                   | Boolean       | false  |
+| list         | 纵向滚动数据列表               | array | `[]`               |
+| speed        | 滚动的速度                         | number | `50`               |
+| stand-time         | 停留时间(毫秒) | number | `1000`                |
+| complex-am | 稍复杂的动画，耗能会高     | boolean | `false` |
+| height          | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值                 | number | `40`              |
+| close-mode  | 是否启用右侧关闭图标，可以通过 `slot[name=rightIcon]` 自定义图标                                   | boolean      | `false`  |
 
 ### Slots
 
@@ -266,16 +265,16 @@ app.use(Noticebar);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-noticebar-background| _rgba(251, 248, 220, 1)_ | -  |
-| --nut-noticebar-color| _#d9500b_ | -  |
-| --nut-noticebar-font-size| _14px_ | -  |
-| --nut-noticebar-height| _40px_ | -  |
-| --nut-noticebar-line-height| _24px_ | -  |
-| --nut-noticebar-left-icon-width| _16px_ | -  |
-| --nut-noticebar-right-icon-width| _16px_ | -  |
-| --nut-noticebar-box-padding| _0 16px_ | -  |
-| --nut-noticebar-wrapable-padding| _16px_ | -  |
-| --nut-noticebar-lefticon-margin| _0px 10px_ | -  |
-| --nut-noticebar-righticon-margin| _0px 10px_ | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-noticebar-background| _rgba(251, 248, 220, 1)_ |
+| --nut-noticebar-color| _#d9500b_ |
+| --nut-noticebar-font-size| _14px_ |
+| --nut-noticebar-height| _40px_ |
+| --nut-noticebar-line-height| _24px_ |
+| --nut-noticebar-left-icon-width| _16px_ |
+| --nut-noticebar-right-icon-width| _16px_ |
+| --nut-noticebar-box-padding| _0 16px_ |
+| --nut-noticebar-wrapable-padding| _16px_ |
+| --nut-noticebar-lefticon-margin| _0px 10px_ |
+| --nut-noticebar-righticon-margin| _0px 10px_ |

src/packages/__VUE/noticebar/doc.taro.md

@@ -218,28 +218,27 @@ app.use(Noticebar);
 
 | 字段       | 说明                                                       | 类型          | 默认值 |
 | ---------- | ---------------------------------------------------------- | ------------- | ------ |
-| direction       | 滚动的方向，可选 across、vertical                         | String        | across     |
-| text       | 提示的信息                                                 | String        | 空     |
-| close-mode  | 是否启用关闭模式                                           | Boolean       | false  |
-| left-icon   | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | String        | 空     |
-| right-icon   | closeMode 模式下，默认为 ‘close’,其他模式下，没有为默认图片 | String        | 空     |
-| color      | 导航栏的文字颜色                                           | String        | 空     |
-| background | 导航栏的背景颜色                                           | String        | 空     |
-| delay      | 延时多少秒                                                 | string \| number | 1      |
-| scrollable | 是否可以滚动                                               | Boolean       | true   |
-| speed      | 滚动速率 (px/s)                                            | Number        | 50     |
-| wrapable  | 是否开启文本换行                                           | Boolean       | false    |
+| direction       | 滚动的方向，可选 across、vertical                         | string        | `across`     |
+| text       | 提示的信息                                                 | string        | -     |
+| close-mode  | 是否启用关闭模式                                           | boolean       | `false`  |
+| left-icon   | close为没有左边icon,其他为自定义的图片链接，没有为默认图片 | string        | -     |
+| color      | 导航栏的文字颜色                                           | string        | -     |
+| background | 导航栏的背景颜色                                           | string        | -     |
+| delay      | 延时多少秒                                                 | string \| number | `1`      |
+| scrollable | 是否可以滚动                                               | boolean       | `true`   |
+| speed      | 滚动速率 (px/s)                                            | number        | `50`     |
+| wrapable  | 是否开启文本换行                                           | boolean       | `false`    |
 
 ### Props（direction=vertical）
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| list         | 纵向滚动数据列表               | Array | []               |
-| speed        | 滚动的速度                         | Number | 50               |
-| stand-time         | 停留时间(毫秒) | Number | 1000                |
-| complex-am | 稍复杂的动画，耗能会高     | Boolean | false |
-| height          | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值                 | Number | 40              |
-| close-mode  | 是否启用右侧关闭图标，可以通过slot[name=rightIcon]自定义图标                                   | Boolean       | false  |
+| list         | 纵向滚动数据列表               | array | `[]`               |
+| speed        | 滚动的速度                         | `number` | `50`               |
+| stand-time         | 停留时间(毫秒) | number | `1000`                |
+| complex-am | 稍复杂的动画，耗能会高     | boolean | `false` |
+| height          | 每一个滚动列的高度(px)，注意：在使用 slot 插槽定义滚动单元时，按照实际高度修改此值                 | number | `40`              |
+| close-mode  | 是否启用右侧关闭图标，可以通过 `slot[name=rightIcon]`自定义图标                                   | boolean      | `false`  |
 
 ### Slots
 
@@ -262,17 +261,17 @@ app.use(Noticebar);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-noticebar-background| _rgba(251, 248, 220, 1)_ | -  |
-| --nut-noticebar-color| _#d9500b_ | -  |
-| --nut-noticebar-font-size| _14px_ | -  |
-| --nut-noticebar-height| _40px_ | -  |
-| --nut-noticebar-line-height| _24px_ | -  |
-| --nut-noticebar-left-icon-width| _16px_ | -  |
-| --nut-noticebar-right-icon-width| _16px_ | -  |
-| --nut-noticebar-box-padding| _0 16px_ | -  |
-| --nut-noticebar-wrapable-padding| _16px_ | -  |
-| --nut-noticebar-lefticon-margin| _0px 10px_ | -  |
-| --nut-noticebar-righticon-margin| _0px 10px_ | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-noticebar-background| _rgba(251, 248, 220, 1)_ |
+| --nut-noticebar-color| _#d9500b_ |
+| --nut-noticebar-font-size| _14px_ |
+| --nut-noticebar-height| _40px_ |
+| --nut-noticebar-line-height| _24px_ |
+| --nut-noticebar-left-icon-width| _16px_ |
+| --nut-noticebar-right-icon-width| _16px_ |
+| --nut-noticebar-box-padding| _0 16px_ |
+| --nut-noticebar-wrapable-padding| _16px_ |
+| --nut-noticebar-lefticon-margin| _0px 10px_ |
+| --nut-noticebar-righticon-margin| _0px 10px_ |
 

src/packages/__VUE/noticebar/index.scss

@@ -23,7 +23,7 @@
     height: auto;
     padding: $noticebar-wrapable-padding;
     .nut-noticebar__page-wrap {
-      height: auto;
+      height: auto !important;
       .nut-noticebar__page-wrap-content {
         position: relative;
         white-space: normal;
@@ -61,6 +61,7 @@
     position: absolute;
     white-space: nowrap;
     &.nut-ellipsis {
+      display: inline-block;
       max-width: 100%;
       white-space: nowrap;
       overflow: hidden;

src/packages/__VUE/noticebar/index.taro.vue

@@ -27,9 +27,8 @@
           <slot>{{ text }}</slot>
         </view>
       </view>
-      <view v-if="closeMode || rightIcon" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
-        <slot name="right-icon" v-if="$slots['right-icon']"> </slot>
-        <CircleClose v-else />
+      <view v-if="closeMode || $slots['right-icon']" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
+        <slot name="right-icon"> <CircleClose /> </slot>
       </view>
     </view>
 
@@ -60,12 +59,9 @@
       </template>
 
       <view class="go" @click="!slots.rightIcon && handleClickIcon()">
-        <template v-if="slots.rightIcon">
-          <slot name="rightIcon"></slot>
-        </template>
-        <template v-else-if="closeMode">
-          <CircleClose :color="color" size="11px" />
-        </template>
+        <slot name="rightIcon">
+          <CircleClose v-if="closeMode" :color="color" size="11px" />
+        </slot>
       </view>
     </view>
   </view>
@@ -132,7 +128,6 @@ export default create({
       default: false
     },
     leftIcon: { type: Object || String, default: () => Notice },
-    rightIcon: { type: Object || String, default: '' },
     color: {
       type: String,
       default: '#F9911B'
@@ -204,7 +199,8 @@ export default create({
       return {
         'nut-noticebar__page-wrap-content': true,
         'nut-ellipsis': isEllipsis.value,
-        [`content${state.id}`]: true
+        [`content${state.id}`]: true,
+        [state.animationClass]: true
       };
     });
 
@@ -268,6 +264,7 @@ export default create({
         if (!wrap.value || !content.value) {
           return;
         }
+
         let wrapWidth = 0;
         let offsetWidth = 0;
 
@@ -283,7 +280,7 @@ export default create({
             if (rect.width > 0) offsetWidth = rect.width;
 
             state.isCanScroll = props.scrollable == null ? offsetWidth > wrapWidth : props.scrollable;
-
+            console.log(11, state.isCanScroll);
             if (state.isCanScroll) {
               state.wrapWidth = wrapWidth;
               state.offsetWidth = offsetWidth;
@@ -309,6 +306,7 @@ export default create({
     };
 
     const onAnimationEnd = () => {
+      console.log('运动');
       state.firstRound = false;
 
       setTimeout(() => {

src/packages/__VUE/noticebar/index.vue

@@ -26,7 +26,7 @@
           ><slot>{{ text }}</slot>
         </view>
       </view>
-      <view v-if="closeMode || rightIcon" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
+      <view v-if="closeMode || $slots['right-icon']" class="nut-noticebar__page-righticon" @click.stop="onClickIcon">
         <slot name="right-icon" v-if="$slots['right-icon']"> </slot>
         <CircleClose v-else />
       </view>
@@ -59,12 +59,9 @@
       </template>
 
       <view class="go" @click="!slots.rightIcon && handleClickIcon()">
-        <template v-if="slots.rightIcon">
-          <slot name="rightIcon"></slot>
-        </template>
-        <template v-else-if="closeMode">
-          <CircleClose :color="color" size="11px" />
-        </template>
+        <slot name="rightIcon">
+          <CircleClose v-if="closeMode" :color="color" size="11px" />
+        </slot>
       </view>
     </view>
   </view>
@@ -141,7 +138,6 @@ export default create({
       default: false
     },
     leftIcon: { type: Object || String, default: () => Notice },
-    rightIcon: { type: Object || String, default: '' },
     color: {
       type: String,
       default: ''

src/sites/mobile-taro/vue/project.private.config.json

@@ -15,7 +15,7 @@
         },
         {
           "name": "exhibition/pages/popover/index",
-          "pathName": "exhibition/pages/popover/index",
+          "pathName": "exhibition/pages/noticebar/index",
           "query": "",
           "launchMode": "default",
           "scene": null