Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

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

@@ -206,13 +206,13 @@ app.use(Backtop);
 
 | Attribute            | Description                 | Type    | Default  |
 |-----------------|------------------------------------------|---------|---------|
-| el-id           | Get the parent element of the listening element         | String | -       |
-| bottom         | Distance from bottom of page    | Number  | `20`       |
-| right        | Distance from the right side of the page      | Number |  `10`  |
-| distance     | How high to scroll the page vertically   | Number  | `200`      |
-| z-index         | Set the component z-index   | Number  | `10`       |  
-| is-animation         | Whether there is animation, mutually exclusive with the duration parameter   | Boolean  | `true`       |  
-| duration         | Set animation duration   | Number  | `1000`       |                                          
+| el-id           | Get the parent element of the listening element         | string | -       |
+| bottom         | Distance from bottom of page    | number  | `20`       |
+| right        | Distance from the right side of the page      | number |  `10`  |
+| distance     | How high to scroll the page vertically   | number  | `200`      |
+| z-index         | Set the component z-index   | number  | `10`       |  
+| is-animation         | Whether there is animation, mutually exclusive with the duration parameter   | boolean  | `true`       |  
+| duration         | Set animation duration   | number  | `1000`       |                                          
 
 ### Events
 | Event  | Description     | Arguments    |
@@ -230,6 +230,6 @@ app.use(Backtop);
 ### CSS Variables
 
 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-backtop-border-color       | _#e0e0e0_        | -    |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- | 
+| --nut-backtop-border-color       | _#e0e0e0_        | 

src/packages/__VUE/backtop/doc.md

@@ -210,13 +210,13 @@ app.use(Backtop);
 
 | 字段            | 说明                 | 类型    | 默认值  |
 |-----------------|------------------------------------------|---------|---------|
-| el-id           | 获取监听元素的父级元素         | String | -       |
-| bottom         | 距离页面底部距离    | Number  | `20`       |
-| right        | 距离页面右侧距离      | Number |  `10`  |
-| distance     | 页面垂直滚动多高后出现   | Number  | `200`      |
-| z-index         | 设置组件页面层级   | Number  | `10`       |  
-| is-animation         | 是否有动画,和duration参数互斥   | Boolean  | `true`       |  
-| duration         | 设置动画持续时间   | Number  | `1000`       |                                          
+| el-id           | 获取监听元素的父级元素         | string | -       |
+| bottom         | 距离页面底部距离    | number  | `20`       |
+| right        | 距离页面右侧距离      | number |  `10`  |
+| distance     | 页面垂直滚动多高后出现   | number  | `200`      |
+| z-index         | 设置组件页面层级   | number  | `10`       |  
+| is-animation         | 是否有动画,和duration参数互斥   | boolean  | `true`       |  
+| duration         | 设置动画持续时间   | number  | `1000`       |                                          
 
 ### Events
 | 名称  | 说明     | 回调参数    |
@@ -235,6 +235,6 @@ app.use(Backtop);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-backtop-border-color       | _#e0e0e0_        | -    |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-backtop-border-color       | _#e0e0e0_        | 

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

@@ -200,11 +200,11 @@ export default {
 
 | 字段            | 说明                 | 类型    | 默认值  |
 |-----------------|------------------------------------------|---------|---------|
-| height           | 滚动区域的高度         | String | `100vh`       |
-| bottom         | 距离页面底部距离    | Number  | `20`       |
-| right        | 距离页面右侧距离      | Number |  `10`  |
-| distance     | 页面垂直滚动多高后出现   | Number  | `200`      |
-| z-index         | 设置组件页面层级   | Number  | `10`       |                                          
+| height           | 滚动区域的高度         | string | `100vh`       |
+| bottom         | 距离页面底部距离    | number  | `20`       |
+| right        | 距离页面右侧距离      | number |  `10`  |
+| distance     | 页面垂直滚动多高后出现   | number  | `200`      |
+| z-index         | 设置组件页面层级   | number  | `10`       |                                          
 
 ### Events
 | 名称  | 说明     | 回调参数    |
@@ -224,6 +224,6 @@ export default {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-backtop-border-color       | _#e0e0e0_        | -    |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-backtop-border-color       | _#e0e0e0_        |

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

@@ -194,14 +194,14 @@ The color of the button can be customized through the color property.
 
 | Attribute     | Description                                                         | Type    | Default    |
 | -------- | ------------------------------------------------------------ | ------- | --------- |
-| type     | Can be set to  `primary` `info` `warning` `danger` `success` | String  | `default` |
-| size     | 	Can be set to `large` `small` `mini`                        | String  | `normal`  |
-| shape    | Can be set to `square`                                      | String  | `round`   |
-| color    | Button color, support incoming linear-gradient gradient color                    | String  | -         |
-| plain    | Whether to be plain button     | Boolean | `false`   |
-| disabled | Whether to disable button         | Boolean | `false`   |
-| block    | Whether to set display block      | Boolean | `false`   |
-| loading  | Whether to show loading status     | Boolean | `false`   |
+| type     | Can be set to  `primary` `info` `warning` `danger` `success` | string  | `default` |
+| size     | 	Can be set to `large` `small` `mini`                        | string  | `normal`  |
+| shape    | Can be set to `square`                                      | string  | `round`   |
+| color    | Button color, support incoming linear-gradient gradient color                    | string  | -         |
+| plain    | Whether to be plain button     | boolean | `false`   |
+| disabled | Whether to disable button         | boolean | `false`   |
+| block    | Whether to set display block      | boolean | `false`   |
+| loading  | Whether to show loading status     | boolean | `false`   |
 
 ### Events
 
@@ -215,46 +215,46 @@ The color of the button can be customized through the color property.
 
 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-button-border-radius| _25px_  | - |
-| --nut-button-border-width| _1px_  | - |
-| --nut-button-icon-width| _16px_  | - |
-| --nut-button-default-bg-color| _var(--nut-white)_  | - |
-| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  | - |
-| --nut-button-default-color| _rgba(102, 102, 102, 1)_  | - |
-| --nut-button-default-padding| _0 18px_  | - |
-| --nut-button-mini-padding| _0 12px_  | - |
-| --nut-button-small-padding| _0 12px_  | - |
-| --nut-button-small-height| _28px_  | - |
-| --nut-button-mini-height| _24px_  | - |
-| --nut-button-default-height| _38px_  | - |
-| --nut-button-large-height| _48px_  | - |
-| --nut-button-large-line-height| _46px_  | - |
-| --nut-button-small-line-height| _26px_  | - |
-| --nut-button-block-height| _48px_  | - |
-| --nut-button-default-line-height| _36px_  | - |
-| --nut-button-block-line-height| _46px_  | - |
-| --nut-button-default-font-size| _var(--nut-font-size-2)_  | - |
-| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  | - |
-| --nut-button-small-font-size| _var(--nut-font-size-1)_  | - |
-| --nut-button-mini-font-size| _var(--nut-font-size-1)_  | - |
-| --nut-button-mini-line-height| _1.2_  | - |
-| --nut-button-disabled-opacity| _0.68_  | - |
-| --nut-button-primary-color| _var(--nut-white)_  | - |
-| --nut-button-primary-border-color| _var(--nut-primary-color)_  | - |
-| --nut-button-primary-background-color| _linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%)_  | - |
-| --nut-button-info-color| _var(--nut-white)_  | - |
-| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  | - |
-| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  | - |
-| --nut-button-success-color| _var(--nut-white)_  | - |
-| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  | - |
-| --nut-button-success-background-color| _linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)_  | - |
-| --nut-button-danger-color| _var(--nut-white)_  | - |
-| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  | - |
-| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  | - |
-| --nut-button-warning-color| _var(--nut-white)_  | - |
-| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  | - |
-| --nut-button-warning-background-color| _linear-gradient(135deg,rgba(255, 158, 13, 1) 0%,rgba(255, 167, 13, 1) 45%,rgba(255, 182, 13, 1) 83%,rgba(255, 190, 13, 1) 100%)_  | - |
-| --nut-button-plain-background-color| _var(--nut-white)_  | - |
-| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  | - |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- |
+| --nut-button-border-radius| _25px_  |
+| --nut-button-border-width| _1px_  |
+| --nut-button-icon-width| _16px_  |
+| --nut-button-default-bg-color| _var(--nut-white)_  |
+| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  |
+| --nut-button-default-color| _rgba(102, 102, 102, 1)_  |
+| --nut-button-default-padding| _0 18px_  |
+| --nut-button-mini-padding| _0 12px_  |
+| --nut-button-small-padding| _0 12px_  |
+| --nut-button-small-height| _28px_  |
+| --nut-button-mini-height| _24px_  |
+| --nut-button-default-height| _38px_  |
+| --nut-button-large-height| _48px_  |
+| --nut-button-large-line-height| _46px_  |
+| --nut-button-small-line-height| _26px_  |
+| --nut-button-block-height| _48px_  |
+| --nut-button-default-line-height| _36px_  |
+| --nut-button-block-line-height| _46px_  |
+| --nut-button-default-font-size| _var(--nut-font-size-2)_  |
+| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  |
+| --nut-button-small-font-size| _var(--nut-font-size-1)_  |
+| --nut-button-mini-font-size| _var(--nut-font-size-1)_  |
+| --nut-button-mini-line-height| _1.2_  |
+| --nut-button-disabled-opacity| _0.68_  |
+| --nut-button-primary-color| _var(--nut-white)_  |
+| --nut-button-primary-border-color| _var(--nut-primary-color)_  |
+| --nut-button-primary-background-color| _linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%)_  |
+| --nut-button-info-color| _var(--nut-white)_  |
+| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  |
+| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  |
+| --nut-button-success-color| _var(--nut-white)_  |
+| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  |
+| --nut-button-success-background-color| _linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)_  |
+| --nut-button-danger-color| _var(--nut-white)_  |
+| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  |
+| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  |
+| --nut-button-warning-color| _var(--nut-white)_  |
+| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  |
+| --nut-button-warning-background-color| _linear-gradient(135deg,rgba(255, 158, 13, 1) 0%,rgba(255, 167, 13, 1) 45%,rgba(255, 182, 13, 1) 83%,rgba(255, 190, 13, 1) 100%)_  |
+| --nut-button-plain-background-color| _var(--nut-white)_  |
+| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  |

src/packages/__VUE/button/doc.md

@@ -193,14 +193,14 @@ app.use(Button);
 
 | 参数     | 说明                                                         | 类型    | 默认值    |
 | -------- | ------------------------------------------------------------ | ------- | --------- |
-| type     | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String  | `default` |
-| size     | 尺寸，可选值为 `large` `small` `mini`                        | String  | `normal`  |
-| shape    | 形状，可选值为 `square`                                      | String  | `round`   |
-| color    | 按钮颜色，支持传入 linear-gradient 渐变色                    | String  | -         |
-| plain    | 是否为朴素按钮                                               | Boolean | `false`   |
-| disabled | 是否禁用按钮                                                 | Boolean | `false`   |
-| block    | 是否为块级元素                                               | Boolean | `false`   |
-| loading  | 按钮 loading 状态                                            | Boolean | `false`   |
+| type     | 类型，可选值为 `primary` `info` `warning` `danger` `success` | string  | `default` |
+| size     | 尺寸，可选值为 `large` `small` `mini`                        | string  | `normal`  |
+| shape    | 形状，可选值为 `square`                                      | string  | `round`   |
+| color    | 按钮颜色，支持传入 linear-gradient 渐变色                    | string  | -         |
+| plain    | 是否为朴素按钮                                               | boolean | `false`   |
+| disabled | 是否禁用按钮                                                 | boolean | `false`   |
+| block    | 是否为块级元素                                               | boolean | `false`   |
+| loading  | 按钮 loading 状态                                            | boolean | `false`   |
 
 ### Slots
 
@@ -223,46 +223,46 @@ app.use(Button);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-button-border-radius| _25px_  | - |
-| --nut-button-border-width| _1px_  | - |
-| --nut-button-icon-width| _16px_  | - |
-| --nut-button-default-bg-color| _var(--nut-white)_  | - |
-| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  | - |
-| --nut-button-default-color| _rgba(102, 102, 102, 1)_  | - |
-| --nut-button-default-padding| _0 18px_  | - |
-| --nut-button-mini-padding| _0 12px_  | - |
-| --nut-button-small-padding| _0 12px_  | - |
-| --nut-button-small-height| _28px_  | - |
-| --nut-button-mini-height| _24px_  | - |
-| --nut-button-default-height| _38px_  | - |
-| --nut-button-large-height| _48px_  | - |
-| --nut-button-large-line-height| _46px_  | - |
-| --nut-button-small-line-height| _26px_  | - |
-| --nut-button-block-height| _48px_  | - |
-| --nut-button-default-line-height| _36px_  | - |
-| --nut-button-block-line-height| _46px_  | - |
-| --nut-button-default-font-size| _var(--nut-font-size-2)_  | - |
-| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  | - |
-| --nut-button-small-font-size| _var(--nut-font-size-1)_  | - |
-| --nut-button-mini-font-size| _var(--nut-font-size-1)_  | - |
-| --nut-button-mini-line-height| _1.2_  | - |
-| --nut-button-disabled-opacity| _0.68_  | - |
-| --nut-button-primary-color| _var(--nut-white)_  | - |
-| --nut-button-primary-border-color| _var(--nut-primary-color)_  | - |
-| --nut-button-primary-background-color| _linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%)_  | - |
-| --nut-button-info-color| _var(--nut-white)_  | - |
-| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  | - |
-| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  | - |
-| --nut-button-success-color| _var(--nut-white)_  | - |
-| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  | - |
-| --nut-button-success-background-color| _linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)_  | - |
-| --nut-button-danger-color| _var(--nut-white)_  | - |
-| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  | - |
-| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  | - |
-| --nut-button-warning-color| _var(--nut-white)_  | - |
-| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  | - |
-| --nut-button-warning-background-color| _linear-gradient(135deg,rgba(255, 158, 13, 1) 0%,rgba(255, 167, 13, 1) 45%,rgba(255, 182, 13, 1) 83%,rgba(255, 190, 13, 1) 100%)_  | - |
-| --nut-button-plain-background-color| _var(--nut-white)_  | - |
-| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  | - |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-button-border-radius| _25px_  |
+| --nut-button-border-width| _1px_  |
+| --nut-button-icon-width| _16px_  |
+| --nut-button-default-bg-color| _var(--nut-white)_  |
+| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  |
+| --nut-button-default-color| _rgba(102, 102, 102, 1)_  |
+| --nut-button-default-padding| _0 18px_  |
+| --nut-button-mini-padding| _0 12px_  |
+| --nut-button-small-padding| _0 12px_  |
+| --nut-button-small-height| _28px_  |
+| --nut-button-mini-height| _24px_  |
+| --nut-button-default-height| _38px_  |
+| --nut-button-large-height| _48px_  |
+| --nut-button-large-line-height| _46px_  |
+| --nut-button-small-line-height| _26px_  |
+| --nut-button-block-height| _48px_  |
+| --nut-button-default-line-height| _36px_  |
+| --nut-button-block-line-height| _46px_  |
+| --nut-button-default-font-size| _var(--nut-font-size-2)_  |
+| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  |
+| --nut-button-small-font-size| _var(--nut-font-size-1)_  |
+| --nut-button-mini-font-size| _var(--nut-font-size-1)_  |
+| --nut-button-mini-line-height| _1.2_  |
+| --nut-button-disabled-opacity| _0.68_  |
+| --nut-button-primary-color| _var(--nut-white)_  |
+| --nut-button-primary-border-color| _var(--nut-primary-color)_  |
+| --nut-button-primary-background-color| _linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%)_  |
+| --nut-button-info-color| _var(--nut-white)_  |
+| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  |
+| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  |
+| --nut-button-success-color| _var(--nut-white)_  |
+| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  |
+| --nut-button-success-background-color| _linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)_  |
+| --nut-button-danger-color| _var(--nut-white)_  |
+| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  |
+| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  |
+| --nut-button-warning-color| _var(--nut-white)_  |
+| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  |
+| --nut-button-warning-background-color| _linear-gradient(135deg,rgba(255, 158, 13, 1) 0%,rgba(255, 167, 13, 1) 45%,rgba(255, 182, 13, 1) 83%,rgba(255, 190, 13, 1) 100%)_  |
+| --nut-button-plain-background-color| _var(--nut-white)_  |
+| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  |

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

@@ -191,17 +191,15 @@ app.use(Button);
 
 | 参数     | 说明                                                         | 类型    | 默认值    |
 | -------- | ------------------------------------------------------------ | ------- | --------- |
-| type     | 类型，可选值为 `primary` `info` `warning` `danger` `success` | String  | `default` |
-| size     | 尺寸，可选值为 `large` `small` `mini`                        | String  | `normal`  |
-| shape    | 形状，可选值为 `square`                                      | String  | `round`   |
-| color    | 按钮颜色，支持传入 linear-gradient 渐变色                    | String  | -         |
-| plain    | 是否为朴素按钮                                               | Boolean | `false`   |
-| disabled | 是否禁用按钮                                                 | Boolean | `false`   |
-| block    | 是否为块级元素                                               | Boolean | `false`   |
-| icon     | 按钮图标，同 Icon 组件 name 属性                             | String  | -         |
-| icon-font-class-name | 自定义 icon 字体基础类名                         | String | `nutui-iconfont` |
-| icon-class-prefix   | 自定义 icon 类名前缀，用于使用自定义图标           | String | `nut-icon`       |
-| loading  | 按钮 loading 状态                                            | Boolean | `false`   |
+| type     | 类型，可选值为 `primary` `info` `warning` `danger` `success` | string  | `default` |
+| size     | 尺寸，可选值为 `large` `small` `mini`                        | string  | `normal`  |
+| shape    | 形状，可选值为 `square`                                      | string  | `round`   |
+| color    | 按钮颜色，支持传入 linear-gradient 渐变色                    | string  | -         |
+| plain    | 是否为朴素按钮                                               | boolean | `false`   |
+| disabled | 是否禁用按钮                                                 | boolean | `false`   |
+| block    | 是否为块级元素                                               | boolean | `false`   |
+| icon     | 按钮图标，同 Icon 组件 name 属性                             | string  | -         |
+| loading  | 按钮 loading 状态                                            | boolean | `false`   |
 
 ### Events
 
@@ -215,46 +213,46 @@ app.use(Button);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-button-border-radius| _25px_  | - |
-| --nut-button-border-width| _1px_  | - |
-| --nut-button-icon-width| _16px_  | - |
-| --nut-button-default-bg-color| _var(--nut-white)_  | - |
-| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  | - |
-| --nut-button-default-color| _rgba(102, 102, 102, 1)_  | - |
-| --nut-button-default-padding| _0 18px_  | - |
-| --nut-button-mini-padding| _0 12px_  | - |
-| --nut-button-small-padding| _0 12px_  | - |
-| --nut-button-small-height| _28px_  | - |
-| --nut-button-mini-height| _24px_  | - |
-| --nut-button-default-height| _38px_  | - |
-| --nut-button-large-height| _48px_  | - |
-| --nut-button-large-line-height| _46px_  | - |
-| --nut-button-small-line-height| _26px_  | - |
-| --nut-button-block-height| _48px_  | - |
-| --nut-button-default-line-height| _36px_  | - |
-| --nut-button-block-line-height| _46px_  | - |
-| --nut-button-default-font-size| _var(--nut-font-size-2)_  | - |
-| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  | - |
-| --nut-button-small-font-size| _var(--nut-font-size-1)_  | - |
-| --nut-button-mini-font-size| _var(--nut-font-size-1)_  | - |
-| --nut-button-mini-line-height| _1.2_  | - |
-| --nut-button-disabled-opacity| _0.68_  | - |
-| --nut-button-primary-color| _var(--nut-white)_  | - |
-| --nut-button-primary-border-color| _var(--nut-primary-color)_  | - |
-| --nut-button-primary-background-color| _linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%)_  | - |
-| --nut-button-info-color| _var(--nut-white)_  | - |
-| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  | - |
-| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  | - |
-| --nut-button-success-color| _var(--nut-white)_  | - |
-| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  | - |
-| --nut-button-success-background-color| _linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)_  | - |
-| --nut-button-danger-color| _var(--nut-white)_  | - |
-| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  | - |
-| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  | - |
-| --nut-button-warning-color| _var(--nut-white)_  | - |
-| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  | - |
-| --nut-button-warning-background-color| _linear-gradient(135deg,rgba(255, 158, 13, 1) 0%,rgba(255, 167, 13, 1) 45%,rgba(255, 182, 13, 1) 83%,rgba(255, 190, 13, 1) 100%)_  | - |
-| --nut-button-plain-background-color| _var(--nut-white)_  | - |
-| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  | - |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-button-border-radius| _25px_  |
+| --nut-button-border-width| _1px_  |
+| --nut-button-icon-width| _16px_  |
+| --nut-button-default-bg-color| _var(--nut-white)_  |
+| --nut-button-default-border-color| _rgba(204, 204, 204, 1)_  |
+| --nut-button-default-color| _rgba(102, 102, 102, 1)_  |
+| --nut-button-default-padding| _0 18px_  |
+| --nut-button-mini-padding| _0 12px_  |
+| --nut-button-small-padding| _0 12px_  |
+| --nut-button-small-height| _28px_  |
+| --nut-button-mini-height| _24px_  |
+| --nut-button-default-height| _38px_  |
+| --nut-button-large-height| _48px_  |
+| --nut-button-large-line-height| _46px_  |
+| --nut-button-small-line-height| _26px_  |
+| --nut-button-block-height| _48px_  |
+| --nut-button-default-line-height| _36px_  |
+| --nut-button-block-line-height| _46px_  |
+| --nut-button-default-font-size| _var(--nut-font-size-2)_  |
+| --nut-button-large-font-size| _var(--nut-button-default-font-size)_  |
+| --nut-button-small-font-size| _var(--nut-font-size-1)_  |
+| --nut-button-mini-font-size| _var(--nut-font-size-1)_  |
+| --nut-button-mini-line-height| _1.2_  |
+| --nut-button-disabled-opacity| _0.68_  |
+| --nut-button-primary-color| _var(--nut-white)_  |
+| --nut-button-primary-border-color| _var(--nut-primary-color)_  |
+| --nut-button-primary-background-color| _linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%)_  |
+| --nut-button-info-color| _var(--nut-white)_  |
+| --nut-button-info-border-color| _rgba(73, 106, 242, 1)_  |
+| --nut-button-info-background-color| _linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%)_  |
+| --nut-button-success-color| _var(--nut-white)_  |
+| --nut-button-success-border-color| _rgba(38, 191, 38, 1)_  |
+| --nut-button-success-background-color| _linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)_  |
+| --nut-button-danger-color| _var(--nut-white)_  |
+| --nut-button-danger-border-color| _rgba(250, 44, 25, 1)_  |
+| --nut-button-danger-background-color| _rgba(250, 44, 25, 1)_  |
+| --nut-button-warning-color| _var(--nut-white)_  |
+| --nut-button-warning-border-color| _rgba(255, 158, 13, 1)_  |
+| --nut-button-warning-background-color| _linear-gradient(135deg,rgba(255, 158, 13, 1) 0%,rgba(255, 167, 13, 1) 45%,rgba(255, 182, 13, 1) 83%,rgba(255, 190, 13, 1) 100%)_  |
+| --nut-button-plain-background-color| _var(--nut-white)_  |
+| --nut-button-small-round-border-radius| _var(--nut-button-border-radius)_  |

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

@@ -595,22 +595,22 @@ export default {
 
 | Attribute              | Description                                  | Type            | Default  |
 |-------------------|---------------------------------------------------|-----------------|-----------------|
-| v-model:visible   | whether to show                  | Boolean         | false           |
-| type              | Calendar type ：'one' 'range' 'multiple'    | String          | 'one'           |
-| poppable          | Whether to display the pop-up window                                  | Boolean         | true            |
-| is-auto-back-fill | Automatic backfill                                          | Boolean         | false           |
-| title             | whether to show title                                          | String          | ‘Calendar’      |
-| default-value     | Default value, select single date : `String`，other: `Array` | String 、 Array | null            |
-| start-date        | The start date            | String          | Today            |
-| end-date          | The end date            | String          | 365 days from today |
-| show-today          | Whether to show today's mark               | Boolean          | true |
-| start-text         | Range selection, start part of the text              | String          | Start |
-| end-text         | Range selection, end part of the text            | String          | End |
-| confirm-text          | Bottom confirm button text               | String          | ’Confirm‘ |
-| show-title          | Whether to show the calendar title               | Boolean          | true |
-| show-sub-title          | Whether to display the date title              | Boolean          | true |
-| to-date-animation          | Whether to use scroll animation              | Boolean          | true |
-| first-day-of-week          | Set the start day of week              | 0-6          | 0 |
+| v-model:visible   | whether to show                  | boolean         | `false`           |
+| type              | Calendar type ：'one' 'range' 'multiple'    | string          | `one`           |
+| poppable          | Whether to display the pop-up window                                  | boolean         | `true`            |
+| is-auto-back-fill | Automatic backfill                                          | boolean         | `false`           |
+| title             | whether to show title                                          | string          | `Calendar`      |
+| default-value     | Default value, select single date : `string`，other: `array` | string 、 array | `null`            |
+| start-date        | The start date            | string          | `Today`            |
+| end-date          | The end date            | string          | `365 days from today` |
+| show-today          | Whether to show today's mark               | boolean          | `true` |
+| start-text         | Range selection, start part of the text              | string          | `Start` |
+| end-text         | Range selection, end part of the text            | string          | `End` |
+| confirm-text          | Bottom confirm button text               | string          | `Confirm` |
+| show-title          | Whether to show the calendar title               | boolean          | `true` |
+| show-sub-title          | Whether to display the date title              | boolean          | `true` |
+| to-date-animation          | Whether to use scroll animation              | boolean          | `true` |
+| first-day-of-week          | Set the start day of week              | 0-6          | `0` |
 
 ### Events
 
@@ -646,23 +646,23 @@ Through [ref](https://vuejs.org/guide/essentials/template-refs.html), you can ge
 
 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-calendar-primary-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-choose-color| _var(--nut-active-color)_   | - |
-| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-base-color| _#333333_   | - |
-| --nut-calendar-disable-color| _#d1d0d0_   | - |
-| --nut-calendar-base-font| _var(--nut-font-size-3)_   | - |
-| --nut-calendar-title-font| _var(--nut-font-size-4)_   | - |
-| --nut-calendar-title-font-weight| _500_   | - |
-| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   | - |
-| --nut-calendar-text-font| _var(--nut-font-size-1)_   | - |
-| --nut-calendar-day-font| _16px_   | - |
-| --nut-calendar-day-active-border-radius| _0px_   | - |
-| --nut-calendar-day-width| _14.28%_   | - |
-| --nut-calendar-day-height| _64px_   | - |
-| --nut-calendar-day-font-weight| _500_   | - |
-| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-month-title-font-size| _inherit_   | - |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- | 
+| --nut-calendar-primary-color| _var(--nut-primary-color)_   |
+| --nut-calendar-choose-color| _var(--nut-active-color)_   |
+| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   |
+| --nut-calendar-base-color| _#333333_   |
+| --nut-calendar-disable-color| _#d1d0d0_   |
+| --nut-calendar-base-font| _var(--nut-font-size-3)_   |
+| --nut-calendar-title-font| _var(--nut-font-size-4)_   |
+| --nut-calendar-title-font-weight| _500_   |
+| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   |
+| --nut-calendar-text-font| _var(--nut-font-size-1)_   |
+| --nut-calendar-day-font| _16px_   |
+| --nut-calendar-day-active-border-radius| _0px_   |
+| --nut-calendar-day-width| _14.28%_   |
+| --nut-calendar-day-height| _64px_   |
+| --nut-calendar-day-font-weight| _500_   |
+| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   |
+| --nut-calendar-month-title-font-size| _inherit_   |
 

src/packages/__VUE/calendar/doc.md

@@ -588,22 +588,22 @@ export default {
 
 | 字段              | 说明                                              | 类型            | 默认值          |
 |-------------------|---------------------------------------------------|-----------------|-----------------|
-| v-model:visible   | 是否可见                                          | Boolean         | false           |
-| type              | 类型，日期单择'one'，区间选择'range',日期多选'multiple'    | String          | 'one'           |
-| poppable          | 是否弹窗状态展示                                  | Boolean         | true            |
-| is-auto-back-fill | 自动回填                                          | Boolean         | false           |
-| title             | 显示标题                                          | String          | ‘日期选择’      |
-| default-value     | 默认值，单个日期选择 String，其他为 Array  | String 、 Array | null            |
-| start-date        | 开始日期         | String          | 今天            |
-| end-date          | 结束日期              | String          | 距离今天 365 天 |
-| show-today          | 是否展示今天标记               | Boolean          | true |
-| start-text         | 范围选择，开始信息文案               | String          | ’开始‘ |
-| end-text         | 范围选择，结束信息文案               | String          | ‘结束’ |
-| confirm-text          | 底部确认按钮文案               | String          | ’确认‘ |
-| show-title          | 是否在展示日历标题               | Boolean          | true |
-| show-sub-title          | 是否展示日期标题              | Boolean          | true |
-| to-date-animation          | 是否启动滚动动画              | Boolean          | true |
-| first-day-of-week          | 设置周起始日              | 0-6          | 0 |
+| v-model:visible   | 是否可见                                          | boolean         | `false`           |
+| type              | 类型，日期单择'one'，区间选择'range',日期多选'multiple'    | string          | '`one`'           |
+| poppable          | 是否弹窗状态展示                                  | boolean         | `true`            |
+| is-auto-back-fill | 自动回填                                          | boolean         | `false`           |
+| title             | 显示标题                                          | string          | `日期选择`      |
+| default-value     | 默认值，单个日期选择 string，其他为 Array  | string 、 array | `null`            |
+| start-date        | 开始日期         | string          | `今天`            |
+| end-date          | 结束日期              | string          | `距离今天 365 天` |
+| show-today          | 是否展示今天标记               | boolean          | `true` |
+| start-text         | 范围选择，开始信息文案               | string          | `开始` |
+| end-text         | 范围选择，结束信息文案               | string          | `结束` |
+| confirm-text          | 底部确认按钮文案               | string          | `确认` |
+| show-title          | 是否在展示日历标题               | boolean          | `true` |
+| show-sub-title          | 是否展示日期标题              | boolean          | `true` |
+| to-date-animation          | 是否启动滚动动画              | boolean          | `true` |
+| first-day-of-week          | 设置周起始日              | 0-6          | `0` |
 
 ### Events
 
@@ -639,22 +639,22 @@ export default {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-calendar-primary-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-choose-color| _var(--nut-active-color)_   | - |
-| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-base-color| _#333333_   | - |
-| --nut-calendar-disable-color| _#d1d0d0_   | - |
-| --nut-calendar-base-font| _var(--nut-font-size-3)_   | - |
-| --nut-calendar-title-font| _var(--nut-font-size-4)_   | - |
-| --nut-calendar-title-font-weight| _500_   | - |
-| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   | - |
-| --nut-calendar-text-font| _var(--nut-font-size-1)_   | - |
-| --nut-calendar-day-font| _16px_   | - |
-| --nut-calendar-day-active-border-radius| _0px_   | - |
-| --nut-calendar-day-width| _14.28%_   | - |
-| --nut-calendar-day-height| _64px_   | - |
-| --nut-calendar-day-font-weight| _500_   | - |
-| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-month-title-font-size| _inherit_   | - |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-calendar-primary-color| _var(--nut-primary-color)_   |
+| --nut-calendar-choose-color| _var(--nut-active-color)_   |
+| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   |
+| --nut-calendar-base-color| _#333333_   |
+| --nut-calendar-disable-color| _#d1d0d0_   |
+| --nut-calendar-base-font| _var(--nut-font-size-3)_   |
+| --nut-calendar-title-font| _var(--nut-font-size-4)_   |
+| --nut-calendar-title-font-weight| _500_   |
+| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   |
+| --nut-calendar-text-font| _var(--nut-font-size-1)_   |
+| --nut-calendar-day-font| _16px_   |
+| --nut-calendar-day-active-border-radius| _0px_   |
+| --nut-calendar-day-width| _14.28%_   |
+| --nut-calendar-day-height| _64px_   |
+| --nut-calendar-day-font-weight| _500_   |
+| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   |
+| --nut-calendar-month-title-font-size| _inherit_   |

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

@@ -588,22 +588,22 @@ export default {
 
 | 字段              | 说明                                              | 类型            | 默认值          |
 |-------------------|---------------------------------------------------|-----------------|-----------------|
-| v-model:visible   | 是否可见                                          | Boolean         | false           |
-| type              | 类型，日期单择'one'，区间选择'range',日期多选'multiple'    | String          | 'one'           |
-| poppable          | 是否弹窗状态展示                                  | Boolean         | true            |
-| is-auto-back-fill | 自动回填                                          | Boolean         | false           |
-| title             | 显示标题                                          | String          | ‘日期选择’      |
-| default-value     | 默认值，单个日期选择 String，其他为 Array  | String 、 Array | null            |
-| start-date        | 开始日期         | String          | 今天            |
-| end-date          | 结束日期              | String          | 距离今天 365 天 |
-| show-today          | 是否展示今天标记               | Boolean          | true |
-| start-text         | 范围选择，开始信息文案               | String          | ’开始‘ |
-| end-text         | 范围选择，结束信息文案               | String          | ‘结束’ |
-| confirm-text          | 底部确认按钮文案               | String          | ’确认‘ |
-| show-title          | 是否在展示日历标题               | Boolean          | true |
-| show-sub-title          | 是否展示日期标题              | Boolean          | true |
-| to-date-animation          | 是否启动滚动动画              | Boolean          | true |
-| first-day-of-week          | 设置周起始日              | 0-6          | 0 |
+| v-model:visible   | 是否可见                                          | boolean         | `false`           |
+| type              | 类型，日期单择'one'，区间选择'range',日期多选'multiple'    | string          | `one`          |
+| poppable          | 是否弹窗状态展示                                  | boolean         | `true`            |
+| is-auto-back-fill | 自动回填                                          | boolean         | `false`           |
+| title             | 显示标题                                          | string          | `日期选择`      |
+| default-value     | 默认值，单个日期选择 string，其他为 Array  | string 、 Array | `null`            |
+| start-date        | 开始日期         | string          | 今天            |
+| end-date          | 结束日期              | string          | 距离今天 365 天 |
+| show-today          | 是否展示今天标记               | boolean          | `true` |
+| start-text         | 范围选择，开始信息文案               | string          | `开始` |
+| end-text         | 范围选择，结束信息文案               | string          | `结束` |
+| confirm-text          | 底部确认按钮文案               | string          | `确认` |
+| show-title          | 是否在展示日历标题               | boolean          | `true` |
+| show-sub-title          | 是否展示日期标题              | boolean          | `true` |
+| to-date-animation          | 是否启动滚动动画              | boolean          | `true` |
+| first-day-of-week          | 设置周起始日              | 0-6          | `0` |
 
 ### Events
 
@@ -640,23 +640,23 @@ export default {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-calendar-primary-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-choose-color| _var(--nut-active-color)_   | - |
-| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-base-color| _#333333_   | - |
-| --nut-calendar-disable-color| _#d1d0d0_   | - |
-| --nut-calendar-base-font| _var(--nut-font-size-3)_   | - |
-| --nut-calendar-title-font| _var(--nut-font-size-4)_   | - |
-| --nut-calendar-title-font-weight| _500_   | - |
-| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   | - |
-| --nut-calendar-text-font| _var(--nut-font-size-1)_   | - |
-| --nut-calendar-day-font| _16px_   | - |
-| --nut-calendar-day-active-border-radius| _0px_   | - |
-| --nut-calendar-day-width| _14.28%_   | - |
-| --nut-calendar-day-height| _64px_   | - |
-| --nut-calendar-day-font-weight| _500_   | - |
-| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   | - |
-| --nut-calendar-month-title-font-size| _inherit_   | - |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-calendar-primary-color| _var(--nut-primary-color)_   |
+| --nut-calendar-choose-color| _var(--nut-active-color)_   |
+| --nut-calendar-choose-font-color| _var(--nut-primary-color)_   |
+| --nut-calendar-base-color| _#333333_   |
+| --nut-calendar-disable-color| _#d1d0d0_   |
+| --nut-calendar-base-font| _var(--nut-font-size-3)_   |
+| --nut-calendar-title-font| _var(--nut-font-size-4)_   |
+| --nut-calendar-title-font-weight| _500_   |
+| --nut-calendar-sub-title-font| _var(--nut-font-size-2)_   |
+| --nut-calendar-text-font| _var(--nut-font-size-1)_   |
+| --nut-calendar-day-font| _16px_   |
+| --nut-calendar-day-active-border-radius| _0px_   |
+| --nut-calendar-day-width| _14.28%_   |
+| --nut-calendar-day-height| _64px_   |
+| --nut-calendar-day-font-weight| _500_   |
+| --nut-calendar-day67-font-color| _var(--nut-primary-color)_   |
+| --nut-calendar-month-title-font-size| _inherit_   |
 

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/packages/__VUE/range/doc.en-US.md

@@ -378,19 +378,19 @@ export default {
   
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| v-model | current progress percentage | Number、Number[] | `0` |
-| range | Whether to enable dual slider mode | Boolean | `false` |
-| max | maximum  | Number、String | `100` |
-| min | minimum  | Number、String | `0` |
-| step | step size | Number、String | `1` |
-| disabled | Whether to disable the slider | Boolean | `false` |
-| vertical | Whether to display vertically | Boolean | `false` |
-| hidden-range | whether to hide range values | Boolean | `false` |
-| hidden-tag | whether to hide the label | Boolean | `false` |
-| active-color | progress bar active color | String | `rgba(250, 44, 25, 1)` |
-| inactive-color | Progress bar inactive color | String | `rgba(255, 163, 154, 1)` |
-| button-color | button color | String | `rgba(250, 44, 25, 1)` |
-| marks | scale mark | Object{key:number} | {} |
+| v-model | current progress percentage | number、number[] | `0` |
+| range | Whether to enable dual slider mode | boolean | `false` |
+| max | maximum  | number、string | `100` |
+| min | minimum  | number、string | `0` |
+| step | step size | number、string | `1` |
+| disabled | Whether to disable the slider | boolean | `false` |
+| vertical | Whether to display vertically | boolean | `false` |
+| hidden-range | whether to hide range values | boolean | `false` |
+| hidden-tag | whether to hide the label | boolean | `false` |
+| active-color | progress bar active color | string | `rgba(250, 44, 25, 1)` |
+| inactive-color | Progress bar inactive color | string | `rgba(255, 163, 154, 1)` |
+| button-color | button color | string | `rgba(250, 44, 25, 1)` |
+| marks | scale mark | object{key:number} | `{}` |
 
   
 ### Events
@@ -413,14 +413,14 @@ export default {
 
 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-range-tip-font-color| _#333333_  |  -  |
-|  --nut-range-bg-color| _var(--nut-active-color)_  |  -  |
-|  --nut-range-bg-color-tick| _#fa958c_  |  -  |
-|  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  |  -  |
-|  --nut-range-bar-btn-bg-color| _var(--nut-white)_  |  -  |
-|  --nut-range-bar-btn-width| _24px_  |  -  |
-|  --nut-range-bar-btn-height| _24px_  |  -  |
-|  --nut-range-bar-btn-border| _1px solid var(--nut-primary-color)_  |  -  |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- | 
+|  --nut-range-tip-font-color| _#333333_  |
+|  --nut-range-bg-color| _var(--nut-active-color)_  |
+|  --nut-range-bg-color-tick| _#fa958c_  |
+|  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  |
+|  --nut-range-bar-btn-bg-color| _var(--nut-white)_  |
+|  --nut-range-bar-btn-width| _24px_  |
+|  --nut-range-bar-btn-height| _24px_  |
+|  --nut-range-bar-btn-border| _1px solid var(--nut-primary-color)_  |
 

src/packages/__VUE/range/doc.md

@@ -380,19 +380,19 @@ export default {
   
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model | 当前进度百分比 | Number、Number[] | `0` |
-| range | 是否开启双滑块模式 | Boolean | `false` |
-| max | 最大值 | Number、String | `100` |
-| min | 最小值 | Number、String | `0` |
-| step | 步长 | Number、String | `1` |
-| disabled | 是否禁用滑块 | Boolean | `false` |
-| vertical | 是否竖向展示 | Boolean | `false` |
-| hidden-range | 是否隐藏范围值 | Boolean | `false` |
-| hidden-tag | 是否隐藏标签 | Boolean | `false` |
-| active-color | 进度条激活态颜色 | String | `rgba(250, 44, 25, 1)` |
-| inactive-color | 进度条非激活态颜色 | String | `rgba(255, 163, 154, 1)` |
-| button-color | 按钮颜色 | String | `rgba(250, 44, 25, 1)` |
-| marks | 刻度标示 | Object{key:number} | {} |
+| v-model | 当前进度百分比 | number、number[] | `0` |
+| range | 是否开启双滑块模式 | boolean | `false` |
+| max | 最大值 | number、string | `100` |
+| min | 最小值 | number、string | `0` |
+| step | 步长 | number、string | `1` |
+| disabled | 是否禁用滑块 | boolean | `false` |
+| vertical | 是否竖向展示 | boolean | `false` |
+| hidden-range | 是否隐藏范围值 | boolean | `false` |
+| hidden-tag | 是否隐藏标签 | boolean | `false` |
+| active-color | 进度条激活态颜色 | string | `rgba(250, 44, 25, 1)` |
+| inactive-color | 进度条非激活态颜色 | string | `rgba(255, 163, 154, 1)` |
+| button-color | 按钮颜色 | string | `rgba(250, 44, 25, 1)` |
+| marks | 刻度标示 | object{key:number} | `{}` |
 
   
 ### Events
@@ -416,14 +416,14 @@ export default {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-|  --nut-range-tip-font-color| _#333333_  |  -  |
-|  --nut-range-bg-color| _var(--nut-active-color)_  |  -  |
-|  --nut-range-bg-color-tick| _#fa958c_  |  -  |
-|  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  |  -  |
-|  --nut-range-bar-btn-bg-color| _var(--nut-white)_  |  -  |
-|  --nut-range-bar-btn-width| _24px_  |  -  |
-|  --nut-range-bar-btn-height| _24px_  |  -  |
-|  --nut-range-bar-btn-border| _1px solid var(--nut-primary-color)_  |  -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+|  --nut-range-tip-font-color| _#333333_  | 
+|  --nut-range-bg-color| _var(--nut-active-color)_  | 
+|  --nut-range-bg-color-tick| _#fa958c_  | 
+|  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  | 
+|  --nut-range-bar-btn-bg-color| _var(--nut-white)_  | 
+|  --nut-range-bar-btn-width| _24px_  | 
+|  --nut-range-bar-btn-height| _24px_  | 
+|  --nut-range-bar-btn-border| _1px solid var(--nut-primary-color)_  | 
 

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

@@ -380,19 +380,19 @@ export default {
   
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model | 当前进度百分比 | Number、Number[] | `0` |
-| range | 是否开启双滑块模式 | Boolean | `false` |
-| max | 最大值 | Number、String | `100` |
-| min | 最小值 | Number、String | `0` |
-| step | 步长 | Number、String | `1` |
-| disabled | 是否禁用滑块 | Boolean | `false` |
-| vertical | 是否竖向展示 | Boolean | `false` |
-| hidden-range | 是否隐藏范围值 | Boolean | `false` |
-| hidden-tag | 是否隐藏标签 | Boolean | `false` |
-| active-color | 进度条激活态颜色 | String | `rgba(250, 44, 25, 1)` |
-| inactive-color | 进度条非激活态颜色 | String | `rgba(255, 163, 154, 1)` |
-| button-color | 按钮颜色 | String | `rgba(250, 44, 25, 1)` |
-| marks | 刻度标示 | Object{key:number} | {} |
+| v-model | 当前进度百分比 | number、number[] | `0` |
+| range | 是否开启双滑块模式 | boolean | `false` |
+| max | 最大值 | number、string | `100` |
+| min | 最小值 | number、string | `0` |
+| step | 步长 | number、string | `1` |
+| disabled | 是否禁用滑块 | boolean | `false` |
+| vertical | 是否竖向展示 | boolean | `false` |
+| hidden-range | 是否隐藏范围值 | boolean | `false` |
+| hidden-tag | 是否隐藏标签 | boolean | `false` |
+| active-color | 进度条激活态颜色 | string | `rgba(250, 44, 25, 1)` |
+| inactive-color | 进度条非激活态颜色 | string | `rgba(255, 163, 154, 1)` |
+| button-color | 按钮颜色 | string | `rgba(250, 44, 25, 1)` |
+| marks | 刻度标示 | object{key:number} | `{}` |
 
   
 ### Events
@@ -415,13 +415,13 @@ export default {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-|  --nut-range-tip-font-color| _#333333_  |  -  |
-|  --nut-range-bg-color| _var(--nut-active-color)_  |  -  |
-|  --nut-range-bg-color-tick| _#fa958c_  |  -  |
-|  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  |  -  |
-|  --nut-range-bar-btn-bg-color| _var(--nut-white)_  |  -  |
-|  --nut-range-bar-btn-width| _24px_  |  -  |
-|  --nut-range-bar-btn-height| _24px_  |  -  |
-|  --nut-range-bar-btn-border| _1px solid var(--nut-primary-color)_  |  -  |
+| 名称                                    | 默认值                     |
+| --------------------------------------- | -------------------------- |
+|  --nut-range-tip-font-color| _#333333_  |
+|  --nut-range-bg-color| _var(--nut-active-color)_  |
+|  --nut-range-bg-color-tick| _#fa958c_  |
+|  --nut-range-bar-bg-color| _linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%)_  |
+|  --nut-range-bar-btn-bg-color| _var(--nut-white)_  |
+|  --nut-range-bar-btn-width| _24px_  |
+|  --nut-range-bar-btn-height| _24px_  |
+|  --nut-range-bar-btn-border| _1px solid var(--nut-primary-color)_  |

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

@@ -2,11 +2,13 @@
   <view :class="containerClasses">
     <view class="nut-range-min" v-if="!hiddenRange">{{ +min }}</view>
     <view ref="root" :id="'root-' + refRandomId" :style="wrapperStyle" :class="classes" @click.stop="onClick">
-      <view class="nut-range-mark" v-if="marksList.length > 0">
-        <span v-for="marks in marksList" :key="marks" :class="markClassName(marks)" :style="marksStyle(marks)">
-          {{ marks }}
-          <span class="nut-range-tick" :style="tickStyle(marks)"></span>
-        </span>
+      <view class="nut-range-mark">
+        <template v-if="marksList.length > 0">
+          <span v-for="marks in marksList" :key="marks" :class="markClassName(marks)" :style="marksStyle(marks)">
+            {{ marks }}
+            <span class="nut-range-tick" :style="tickStyle(marks)"></span>
+          </span>
+        </template>
       </view>
       <view class="nut-range-bar" :style="barStyle">
         <template v-if="range">
@@ -296,13 +298,20 @@ export default create({
       if (props.disabled) {
         return;
       }
-
       const { min, modelValue } = props;
       const rect = await useTaroRect(root, Taro);
-      let delta = event.touches[0].clientX - rect.left;
+      let clientX, clientY;
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      } else {
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+      }
+      let delta = clientX - rect.left;
       let total = rect.width;
       if (props.vertical) {
-        delta = event.touches[0].clientY - rect.top;
+        delta = clientY - rect.top;
         total = rect.height;
       }
       const value = Number(min) + (delta / total) * scope.value;

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

@@ -151,15 +151,15 @@ app.use(TrendArrow);
 
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| rate         | Value, the arrow is up when it is greater than 0, and the arrow is down when it is less than 0    | Number | -                |
-| digits         | decimal precision               | Number | 2               |
-| show-sign         | Whether to display plus and minus signs               | Boolean | false               |
-| show-zero         |whether to show 0               | Boolean | false               |
-| arrow-left        | whether to show an arrow to the left of the number     | Boolean | false               |
-| sync-text-color   | Whether the text color is in sync with the arrow               | Boolean | true   |
-| text-color        | text color               | String | '#333333'               |
-| rise-color         | up arrow color               | String | '#fa2c19'               |
-| drop-color         | down arrow color               | String | ‘#64b578’               |
+| rate         | Value, the arrow is up when it is greater than 0, and the arrow is down when it is less than 0    | number | -                |
+| digits         | decimal precision               | number | `2`               |
+| show-sign         | Whether to display plus and minus signs               | boolean | `false`               |
+| show-zero         |whether to show 0               | boolean | `false`               |
+| arrow-left        | whether to show an arrow to the left of the number     | boolean | `false`               |
+| sync-text-color   | Whether the text color is in sync with the arrow               | boolean | `true`   |
+| text-color        | text color               | string | `#333333`               |
+| rise-color         | up arrow color               | string | `#fa2c19`            |
+| drop-color         | down arrow color               | string | `#64b578`           |
 
 ### Slots
 
@@ -174,8 +174,8 @@ app.use(TrendArrow);
 
 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-trendarrow-font-size| _14px_  | -  |
-| --nut-trendarrow-before-icon-margin| _4px_  | -  |
-| --nut-trendarrow-icon-width| _12px_  | -  |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- | 
+| --nut-trendarrow-font-size| _14px_   |
+| --nut-trendarrow-before-icon-margin| _4px_   |
+| --nut-trendarrow-icon-width| _12px_   |

src/packages/__VUE/trendarrow/doc.md

@@ -153,15 +153,15 @@ app.use(TrendArrow);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| rate         | 数值，大于0时箭头向上，小于0时箭头向下    | Number | -                |
-| digits         | 小数位精度               | Number | 2               |
-| show-sign         | 是否显示加减号               | Boolean | false               |
-| show-zero         | 是否显示 0               | Boolean | false               |
-| arrow-left        | 是否在数字左侧显示箭头     | Boolean | false               |
-| sync-text-color   | 文字颜色是否与箭头同步               | Boolean | true   |
-| text-color        | 文字颜色               | String | '#333333'               |
-| rise-color         | 向上箭头颜色               | String | '#fa2c19'               |
-| drop-color         | 向下箭头颜色               | String | ‘#64b578’               |
+| rate         | 数值，大于0时箭头向上，小于0时箭头向下    | number | `-`                |
+| digits         | 小数位精度               | number | `2`               |
+| show-sign         | 是否显示加减号               | boolean | `false`               |
+| show-zero         | 是否显示 0               | boolean | `false`               |
+| arrow-left        | 是否在数字左侧显示箭头     | boolean | `false`               |
+| sync-text-color   | 文字颜色是否与箭头同步               | boolean | `true`   |
+| text-color        | 文字颜色               | string | `#333333`               |
+| rise-color         | 向上箭头颜色               | string | `#fa2c19`               |
+| drop-color         | 向下箭头颜色               | string | `#64b578`               |
 
 ### Slots
 
@@ -176,8 +176,8 @@ app.use(TrendArrow);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-trendarrow-font-size| _14px_  | -  |
-| --nut-trendarrow-before-icon-margin| _4px_  | -  |
-| --nut-trendarrow-icon-width| _12px_  | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-trendarrow-font-size| _14px_  |
+| --nut-trendarrow-before-icon-margin| _4px_  |
+| --nut-trendarrow-icon-width| _12px_  | 

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

@@ -153,15 +153,15 @@ app.use(TrendArrow);
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| rate         | 数值，大于0时箭头向上，小于0时箭头向下    | Number | -                |
-| digits         | 小数位精度               | Number | 2               |
-| show-sign         | 是否显示加减号               | Boolean | false               |
-| show-zero         | 是否显示 0               | Boolean | false               |
-| arrow-left        | 是否在数字左侧显示箭头     | Boolean | false               |
-| sync-text-color   | 文字颜色是否与箭头同步               | Boolean | true   |
-| text-color        | 文字颜色               | String | '#333333'               |
-| rise-color         | 向上箭头颜色               | String | '#fa2c19'               |
-| drop-color         | 向下箭头颜色               | String | ‘#64b578’               |
+| rate         | 数值，大于0时箭头向上，小于0时箭头向下    | number | `-`|
+| digits         | 小数位精度               | number | `2`               |
+| show-sign         | 是否显示加减号               | boolean | `false`               |
+| show-zero         | 是否显示 0               | boolean | `false`               |
+| arrow-left        | 是否在数字左侧显示箭头     | boolean | `false`               |
+| sync-text-color   | 文字颜色是否与箭头同步               | boolean | `true`   |
+| text-color        | 文字颜色               | string | `#333333`               |
+| rise-color         | 向上箭头颜色               | string | `#fa2c19`               |
+| drop-color         | 向下箭头颜色               | string | `#64b578`               |
 
 ### Slots
 
@@ -176,8 +176,8 @@ app.use(TrendArrow);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-trendarrow-font-size| _14px_  | -  |
-| --nut-trendarrow-before-icon-margin| _4px_  | -  |
-| --nut-trendarrow-icon-width| _12px_  | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-trendarrow-font-size| _14px_   |
+| --nut-trendarrow-before-icon-margin| _4px_   |
+| --nut-trendarrow-icon-width| _12px_   |

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

@@ -106,20 +106,20 @@ app.use(Watermark);
 ### Props
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| width       | Width of watermark     | `number`           | `120`                |
-| height      | Height of watermark               | `number`           | `64`                 |
-| rotate      | Rotation angle when drawing watermark   | `number`           | `-22`                |
-| image       | Image source, it is recommended to export 2x or 3x images, and the image rendering watermark is preferred | `string`           | -                    |
-| image-width  | Width of image                                             | `number`           | `120`                |
-| image-height | Height of image                                             | `number`           | `64`                 |
-| z-index      | Z-index of the appended watermark element                             | `number`           | `2000`               |
-| content     | Watermark text content                                         | `string`           | -                    |
-| font-color   | Watermark text color                                         | `string`           | `rgba(0, 0, 0, .15)` |
-| font-size    | Watermark text font size                                             | `string \| number` | `16`                 |
-| gap-x        | Horizontal spacing between watermarks                                   | `number`           | `24`                 |
-| gap-y        | Vertical spacing between watermarks                                   | `number`           | `48`                 |
-| full-page    | Overwrite entire page                                     | `boolean`          | `true`               |
-| font-family  | Watermark text font family                  | `boolean`          | `true`               |
+| width       | Width of watermark     | number           | `120`                |
+| height      | Height of watermark               | number           | `64`                 |
+| rotate      | Rotation angle when drawing watermark   | number           | `-22`                |
+| image       | Image source, it is recommended to export 2x or 3x images, and the image rendering watermark is preferred | string           | -                    |
+| image-width  | Width of image                                             | number           | `120`                |
+| image-height | Height of image                                             | number           | `64`                 |
+| z-index      | Z-index of the appended watermark element                             | number           | `2000`               |
+| content     | Watermark text content                                         | string           | -                    |
+| font-color   | Watermark text color                                         | string           | `rgba(0, 0, 0, .15)` |
+| font-size    | Watermark text font size                                             | string \| number | `16`                 |
+| gap-x        | Horizontal spacing between watermarks                                   | number           | `24`                 |
+| gap-y        | Vertical spacing between watermarks                                   | number           | `48`                 |
+| full-page    | Overwrite entire page                                     | boolean          | `true`               |
+| font-family  | Watermark text font family                  | boolean          | `true`               |
 
 ## Theming
 
@@ -127,6 +127,6 @@ app.use(Watermark);
 
 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-watermark-z-index        | _ 2000_        | -    |
+| Name | Default Value | 
+| --------------------------------------- | -------------------------- | 
+| --nut-watermark-z-index        | _ 2000_        | 

src/packages/__VUE/watermark/doc.md

@@ -111,20 +111,20 @@ app.use(Watermark);
 
 | 参数          | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| width       | 水印的宽度                                           | `number`           | `120`                |
-| height      | 水印的高度                                           | `number`           | `64`                 |
-| rotate      | 水印绘制时，旋转的角度                  | `number`           | `-22`                |
-| image       | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | `string`           | -                    |
-| image-width  | 图片宽度                                             | `number`           | `120`                |
-| image-height | 图片高度                                             | `number`           | `64`                 |
-| z-index      | 追加的水印元素的 z-index                             | `number`           | `2000`               |
-| content     | 水印文字内容                                         | `string`           | -                    |
-| font-color   | 水印文字颜色                                         | `string`           | `rgba(0, 0, 0, .15)` |
-| font-size    | 文字大小                                             | `string \| number` | `16`                 |
-| gap-x        | 水印之间的水平间距                                   | `number`           | `24`                 |
-| gap-y       | 水印之间的垂直间距                                   | `number`           | `48`                 |
-| full-page    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
-| font-family  | 水印文字字体                                     | `boolean`          | `true`               |
+| width       | 水印的宽度                                           | number         | `120`                |
+| height      | 水印的高度                                           | number           | `64`                 |
+| rotate      | 水印绘制时，旋转的角度                  | number           | `-22`                |
+| image       | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | string           | -                    |
+| image-width  | 图片宽度                                             | number           | `120`                |
+| image-height | 图片高度                                             | number           | `64`                 |
+| z-index      | 追加的水印元素的 z-index                             | number           | `2000`               |
+| content     | 水印文字内容                                         | string           | -                    |
+| font-color   | 水印文字颜色                                         | string           | `rgba(0, 0, 0, .15)` |
+| font-size    | 文字大小                                             | string \| number | `16`                 |
+| gap-x        | 水印之间的水平间距                                   | number           | `24`                 |
+| gap-y       | 水印之间的垂直间距                                   | number           | `48`                 |
+| full-page    | 是否覆盖整个页面                                     | boolean          | `true`               |
+| font-family  | 水印文字字体                                     | boolean          | `true`               |
 
 ## 主题定制
 
@@ -132,8 +132,8 @@ app.use(Watermark);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-watermark-z-index        | _ 2000_        | -    |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-watermark-z-index        | _ 2000_        | 
 
 

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

@@ -111,20 +111,20 @@ app.use(Watermark);
 
 | 参数          | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| width       | 水印的宽度                                           | `number`           | `120`                |
-| height      | 水印的高度                                           | `number`           | `64`                 |
-| rotate      | 水印绘制时，旋转的角度                  | `number`           | `-22`                |
-| image       | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | `string`           | -                    |
-| image-width  | 图片宽度                                             | `number`           | `120`                |
-| image-height | 图片高度                                             | `number`           | `64`                 |
-| z-index      | 追加的水印元素的 z-index                             | `number`           | `2000`               |
-| content     | 水印文字内容                                         | `string`           | -                    |
-| font-color   | 水印文字颜色                                         | `string`           | `rgba(0, 0, 0, .15)` |
-| font-size    | 文字大小                                             | `string \| number` | `16`                 |
-| gap-x        | 水印之间的水平间距                                   | `number`           | `24`                 |
-| gap-y       | 水印之间的垂直间距                                   | `number`           | `48`                 |
-| full-page    | 是否覆盖整个页面                                     | `boolean`          | `true`               |
-| font-family  | 水印文字字体                                     | `boolean`          | `true`               |
+| width       | 水印的宽度                                           | number           | `120`                |
+| height      | 水印的高度                                           | number           | `64`                 |
+| rotate      | 水印绘制时，旋转的角度                  | number           | `-22`                |
+| image       | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | string           | -                    |
+| image-width  | 图片宽度                                             | number           | `120`                |
+| image-height | 图片高度                                             | number           | `64`                 |
+| z-index      | 追加的水印元素的 z-index                             | number           | `2000`               |
+| content     | 水印文字内容                                         | string           | -                    |
+| font-color   | 水印文字颜色                                         | string           | `rgba(0, 0, 0, .15)` |
+| font-size    | 文字大小                                             | string \| number | `16`                 |
+| gap-x        | 水印之间的水平间距                                   | number           | `24`                 |
+| gap-y       | 水印之间的垂直间距                                   | number           | `48`                 |
+| full-page    | 是否覆盖整个页面                                     | boolean          | `true`               |
+| font-family  | 水印文字字体                                     | boolean          | `true`               |
 
 ## 主题定制
 
@@ -132,8 +132,8 @@ app.use(Watermark);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-watermark-z-index        | _ 2000_        | -    |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-watermark-z-index        | _ 2000_        |
 
 

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

@@ -121,7 +121,7 @@ export default create({
       const canvasHeight = `${(gapY + height) * ratio}`;
       const markWidth = width * ratio;
       const markHeight = height * ratio;
-      const canvas: any = Taro.createOffscreenCanvas({
+      const canvas: Taro.OffscreenCanvas = Taro.createOffscreenCanvas({
         type: '2d',
         width: Number(canvasWidth),
         height: Number(canvasHeight)
@@ -130,45 +130,87 @@ export default create({
 
       if (ctx) {
         if (image) {
-          ctx.translate(markWidth / 2, markHeight / 2);
-          ctx.rotate((Math.PI / 180) * Number(rotate));
           // 创建一个图片
-          const img = canvas.createImage();
-
-          img.crossOrigin = 'anonymous';
-          img.referrerPolicy = 'no-referrer';
-          img.src = image; // 要加载的图片 url, 可以是base64
-          img.onload = () => {
-            ctx.drawImage(
-              img,
-              (-imageWidth * ratio) / 2,
-              (-imageHeight * ratio) / 2,
-              imageWidth * ratio,
-              imageHeight * ratio
-            );
-            ctx.restore();
-            state.base64Url = ctx.canvas.toDataURL();
-          };
+          const img = canvas.createImage() as HTMLImageElement;
+          dealWithImage(ctx, img, ratio, ctx.canvas, markWidth, markHeight);
         } else if (content) {
-          ctx.textBaseline = 'middle';
-          ctx.textAlign = 'center';
-          // 文字绕中间旋转
-          ctx.translate(markWidth / 2, markHeight / 2);
-          ctx.rotate((Math.PI / 180) * Number(rotate));
-
-          const markSize = Number(fontSize) * ratio;
-          ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
-          ctx.fillStyle = fontColor;
+          dealWithText(ctx, ratio, ctx.canvas, markWidth, markHeight);
+        }
+      } else {
+        throw new Error('当前环境不支持Canvas');
+      }
+    };
+    const initH5 = () => {
+      const canvas = document.createElement('canvas');
+      const ratio = window.devicePixelRatio;
+      const ctx = canvas.getContext('2d');
+      const canvasWidth = `${(gapX + width) * ratio}px`;
+      const canvasHeight = `${(gapY + height) * ratio}px`;
+      const markWidth = width * ratio;
+      const markHeight = height * ratio;
+      canvas.setAttribute('width', canvasWidth);
+      canvas.setAttribute('height', canvasHeight);
 
-          ctx.fillText(content, 0, 0);
-          ctx.restore();
-          state.base64Url = ctx.canvas.toDataURL();
+      if (ctx) {
+        if (image) {
+          const img = new Image();
+          dealWithImage(ctx, img, ratio, canvas, markWidth, markHeight);
+        } else if (content) {
+          dealWithText(ctx, ratio, canvas, markWidth, markHeight);
         }
       } else {
         throw new Error('当前环境不支持Canvas');
       }
     };
-    init();
+    const dealWithImage = (
+      ctx: any,
+      img: HTMLImageElement,
+      ratio: number,
+      canvas: HTMLCanvasElement,
+      markWidth: number,
+      markHeight: number
+    ) => {
+      ctx.translate(markWidth / 2, markHeight / 2);
+      ctx.rotate((Math.PI / 180) * Number(rotate));
+      img.crossOrigin = 'anonymous';
+      img.referrerPolicy = 'no-referrer';
+      img.src = image; // 要加载的图片 url, 可以是base64
+      img.onload = () => {
+        ctx.drawImage(
+          img,
+          (-imageWidth * ratio) / 2,
+          (-imageHeight * ratio) / 2,
+          imageWidth * ratio,
+          imageHeight * ratio
+        );
+        ctx.restore();
+        state.base64Url = canvas.toDataURL();
+      };
+    };
+    const dealWithText = (
+      ctx: any,
+      ratio: number,
+      canvas: HTMLCanvasElement,
+      markWidth: number,
+      markHeight: number
+    ) => {
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+      // 文字绕中间旋转
+      ctx.translate(markWidth / 2, markHeight / 2);
+      ctx.rotate((Math.PI / 180) * Number(rotate));
+      const markSize = Number(fontSize) * ratio;
+      ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
+      ctx.fillStyle = fontColor;
+      ctx.fillText(content, 0, 0);
+      ctx.restore();
+      state.base64Url = canvas.toDataURL();
+    };
+    if (Taro.getEnv() === 'WEB') {
+      initH5();
+    } else {
+      init();
+    }
 
     watch(
       () => [

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

src/sites/mobile-taro/vue/src/basic/pages/button/index.vue

@@ -35,8 +35,17 @@
     </div>
     <h2>图标按钮</h2>
     <div class="demo-button-row2">
-      <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>
-      <nut-button shape="square" type="primary" icon="star">收藏</nut-button>
+      <nut-button shape="square" plain type="primary">
+        <template #icon>
+          <StarFill />
+        </template>
+      </nut-button>
+      <nut-button shape="square" type="primary">
+        <template #icon>
+          <Star />
+        </template>
+        收藏
+      </nut-button>
     </div>
 
     <h2>按钮尺寸</h2>
@@ -61,8 +70,13 @@
 
 <script>
 import { ref } from 'vue';
+import { StarFill, Star } from '@nutui/icons-vue-taro';
 export default {
   props: {},
+  components: {
+    StarFill,
+    Star
+  },
   setup(props) {
     let isLoading = ref(false);
     const changeLoading = () => {

src/sites/mobile-taro/vue/src/exhibition/pages/watermark/index.vue

@@ -51,6 +51,7 @@ export default defineComponent({
     background: #fff;
     > img {
       width: 100%;
+      max-height: 100%;
     }
     .mark1 {
       width: 100%;