docs: Picker 组件文档修改 (#1995)

* fix: popover

* fix: 代码回退

* feat: 文档修改

* feat: 修改Imagepreview

* feat: imagepreview文案修改

* feat: noticebar文案修改

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

* feat: 组件文档修改picker

src/packages/__VUE/audio/demo.vue

@@ -22,7 +22,7 @@
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><Voice></Voice></div>
+        <Voice></Voice>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
@@ -181,6 +181,7 @@ export default createDemo({
   .nut-voice {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     width: 100px;
     height: 20px;
     padding: 8px;

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

@@ -240,12 +240,12 @@ export default {
 
 | Attribute            | Description               | Type   | Default  |
 |--------------|----------------------------------|--------|------------------|
-| url         | Audio Url               | String | ''              |
-| muted        | Whether to be muted                         | Boolean | false             |
-| autoplay         | Whether to autoplay | Boolean | false               |
-| loop | Whether to loop playback    | Boolean | false |
-| preload          | Whether to  proload audio                      | String | 'auto'              |
-| type         |  Show type| String | 'progress'              |
+| url         | Audio Url               | string | `''`              |
+| muted        | Whether to be muted                         | boolean | `false`             |
+| autoplay         | Whether to autoplay | boolean | `false`               |
+| loop | Whether to loop playback    | boolean | `false` |
+| preload          | Whether to  proload audio                      | string | `auto`              |
+| type         |  Show type| String | `progress`              |
 
 
 ### Events

src/packages/__VUE/audio/doc.md

@@ -112,7 +112,6 @@ export default {
 ### 进度条展示
 
 :::demo
-
 ```html
 <template>
     <nut-audio
@@ -150,7 +149,6 @@ export default {
 ### 自定义操作按钮
 
 :::demo
-
 ```vue
 <template>
     <nut-audio
@@ -240,12 +238,12 @@ export default {
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| url         | 语音播放的连接               | String | ''              |
-| muted        | 是否静音                         | Boolean | false             |
-| autoplay         | 是否自动播放 | Boolean | false               |
-| loop | 是否循环播放     | Boolean | false |
-| preload          | 是否预加载语音                        | String | 'auto'              |
-| type         | 展示形式，可选值：controls 控制面板   progress 进度条  icon 图标 none 自定义 | String | 'progress'              |
+| url         | 语音播放的连接               | string | `''`              |
+| muted        | 是否静音                         | boolean | `false`             |
+| autoplay         | 是否自动播放 | boolean | `false`               |
+| loop | 是否循环播放     | boolean | `false` |
+| preload          | 是否预加载语音                        | string | `auto`              |
+| type         | 展示形式，可选值：controls 控制面板   progress 进度条  icon 图标 none 自定义 | string | `progress`              |
 
 
 ### Events

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

@@ -1,4 +1,4 @@
-# Audio组件
+# Audio 组件
 
 ### 介绍
 

src/packages/__VUE/audio/index.scss

@@ -39,7 +39,7 @@
       height: 30px;
       background: #fff;
       border-radius: 50%;
-      box-shadow: 0 0 8px rgba($color: $text-color, $alpha: 0.5);
+      box-shadow: 0 0 8px rgba(#808080, 0.5);
       &.nut-audio__icon--stop {
         &::after {
           position: absolute;

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

@@ -369,27 +369,27 @@ Use the children field of the Columns attribute to cascade options
 
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| v-model:value         | Default Index               | Array | []              |
-| v-model:visible          | Is Show               | Boolean | -                |
-| columns         | Columns data              | Array | -                |
-| title                  | Toolbar title                   | String  | -      |
-| cancel-text            | Text of cancel button               | String  | cancel   |
-| ok-text                | Text of confirm button               | String  | confirm   |
-| three-dimensional          | Turn on 3D effects      | Boolean  | true   |
-| swipe-duration          | Duration of the momentum animation        | Number、String  | 1000   |
-| safe-area-inset-bottom	| Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is  `bottom` |	Boolean	|`false`     |
-| visible-option-num          | Count of visible columns       | number \| string | 7               |
-| option-height         | Option height             | number \| string | 36     |
-| show-toolbar         | Whether to show toolbar             | Boolean | true    |
+| v-model:value         | Default Index               | array | `[]`              |
+| v-model:visible          | Is Show               | boolean | -                |
+| columns         | Columns data              | array | -                |
+| title                  | Toolbar title                   | string  | -      |
+| cancel-text            | Text of cancel button               | string  | `cancel`   |
+| ok-text                | Text of confirm button               | string  | `confirm`   |
+| three-dimensional          | Turn on 3D effects      | boolean  | `true`   |
+| swipe-duration          | Duration of the momentum animation        | number \| string  | `1000`   |
+| safe-area-inset-bottom	| Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is  `bottom` |	boolean	|`false`     |
+| visible-option-num          | Count of visible columns       | number \| string | `7`              |
+| option-height         | Option height             | number \| string | `36`     |
+| show-toolbar         | Whether to show toolbar             | boolean | `true`    |
 
 ### Data Structure of Columns
 
 | Attribute         | Description                             | Type   | Default           |
 |--------------|----------------------------------|--------|------------------|
-| text        | Text of column              | String|Number |               |
-| value          | Value of column               | String|Number |            |
-| children         | Cascader Option              | Array | -                |
-| className                  | Extra CalssName                   | String  |      |
+| text        | Text of column              | string \| number | -             |
+| value          | Value of column               | string \| number |   -        |
+| children         | Cascader Option              | array | -                |
+| className                  | Extra CalssName                   | string  |  -    |
 
 ### Events
 
@@ -412,19 +412,19 @@ Use the children field of the Columns attribute to cascade options
 
 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-picker-cancel-color| _#808080_  | -  |
-| --nut-picker-ok-color| _var(--nut-primary-color)_  | -  |
-| --nut-picker-bar-cancel-font-size| _14px_  | -  |
-| --nut-picker-bar-ok-font-size| _14px_  | -  |
-| --nut-picker-bar-button-padding| _0 15px_  | -  |
-| --nut-picker-bar-title-font-size| _16px_  | -  |
-| --nut-picker-bar-title-color| _var(--nut-title-color)_  | -  |
-| --nut-picker-bar-title-font-weight| _normal_  | -  |
-| --nut-picker-item-height| _36px_  | -  |
-| --nut-picker-item-text-color| _var(--nut-title-color)_  | -  |
-| --nut-picker-item-active-text-color| _inherit_  | -  |
-| --nut-picker-item-text-font-size| _14px_  | -  |
-| --nut-picker-item-active-line-border| _1px solid #d8d8d8_  | -  |
-| --nut-picker-columns-item-color| _var(--nut-title-color)_  | -  |
+| Name | Default Value |
+| --------------------------------------- | -------------------------- | 
+| --nut-picker-cancel-color| _#808080_  | 
+| --nut-picker-ok-color| _var(--nut-primary-color)_  | 
+| --nut-picker-bar-cancel-font-size| _14px_  | 
+| --nut-picker-bar-ok-font-size| _14px_  | 
+| --nut-picker-bar-button-padding| _0 15px_  | 
+| --nut-picker-bar-title-font-size| _16px_  | 
+| --nut-picker-bar-title-color| _var(--nut-title-color)_  | 
+| --nut-picker-bar-title-font-weight| _normal_  | 
+| --nut-picker-item-height| _36px_  | 
+| --nut-picker-item-text-color| _var(--nut-title-color)_  | 
+| --nut-picker-item-active-text-color| _inherit_  | 
+| --nut-picker-item-text-font-size| _14px_  | 
+| --nut-picker-item-active-line-border| _1px solid #d8d8d8_  | 
+| --nut-picker-columns-item-color| _var(--nut-title-color)_  | 

src/packages/__VUE/picker/doc.md

@@ -55,16 +55,16 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 ```html
 <template>
   <nut-cell title="请选择城市" :desc="popupDesc" @click="show = true"></nut-cell>
-    <nut-popup position="bottom"  v-model:visible="show">
-      <nut-picker
-        :columns="columns"
-        title="请选择城市"
-        @confirm="popupConfirm"
-        @cancel="show=false"
-      >
+  <nut-popup position="bottom"  v-model:visible="show">
+    <nut-picker
+      :columns="columns"
+      title="请选择城市"
+      @confirm="popupConfirm"
+      @cancel="show=false"
+    >
       <nut-button block type="primary">永远有效</nut-button>
-      </nut-picker>
-    </nut-popup>
+    </nut-picker>
+  </nut-popup>
 </template>
 <script>
   import { ref } from 'vue';
@@ -98,7 +98,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 
 ### 默认选中项
 
-通过设置 modelValue 实现默认选中项，modelValue 是一个包含每项配置 value 值的数组。
+通过设置 `modelValue` 实现默认选中项，`modelValue` 是一个包含每项配置 value 值的数组。
 
 :::demo
 ```html
@@ -181,7 +181,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 
 ### 多列展示
 
-columns 属性可以通过二维数组的形式配置多列选择。
+`columns` 属性可以通过二维数组的形式配置多列选择。
 
 :::demo
 ```html
@@ -233,7 +233,7 @@ columns 属性可以通过二维数组的形式配置多列选择。
 
 ### 多级联动
 
-使用 columns 属性的 children 字段可以实现选项级联的效果。
+使用 `columns` 属性的 `children` 字段可以实现选项级联的效果。
 
 :::demo
 ```html
@@ -311,7 +311,7 @@ columns 属性可以通过二维数组的形式配置多列选择。
 
 ### 异步获取
 
-在实际开发中，大部分情况 Columns 属性的数据是通过异步方式获取的。
+在实际开发中，大部分情况 `Columns` 属性的数据是通过异步方式获取的。
 
 :::demo
 ```html
@@ -364,26 +364,26 @@ columns 属性可以通过二维数组的形式配置多列选择。
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| v-model:value         | 默认选中项               | Array | []              |
-| columns         | 对象数组，配置每一列显示的数据               | Array | -                |
-| title                  | 设置标题                   | String  | -      |
-| cancel-text            | 取消按钮文案               | String  | 取消   |
-| ok-text                | 确定按钮文案               | String  | 确定   |
-| three-dimensional          | 是否开启3D效果               | Boolean  | true   |
-| swipe-duration         | 惯性滚动时长        | Number、String  | 1000   |
-| safe-area-inset-bottom 	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	Boolean	|`false`     |
-| visible-option-num          |可见的选项个数              | number \| string | 7               |
-| option-height         | 选项高度             | number \| string | 36     |
-| show-toolbar         | 是否显示顶部导航             | Boolean | true    |
+| v-model:value         | 默认选中项               | array | `[]`              |
+| columns         | 对象数组，配置每一列显示的数据               | array | -                |
+| title                  | 设置标题                   | string  | -      |
+| cancel-text            | 取消按钮文案               | string  | `取消`   |
+| ok-text                | 确定按钮文案               | string  | `确定`   |
+| three-dimensional          | 是否开启3D效果               | boolean  | `true`   |
+| swipe-duration         | 惯性滚动时长        | number \| string  | `1000`   |
+| safe-area-inset-bottom 	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	boolean	|`false`     |
+| visible-option-num          |可见的选项个数              | number \| string | `7`               |
+| option-height         | 选项高度             | number \| string | `36`     |
+| show-toolbar         | 是否显示顶部导航             | boolean | `true`    |
 
 ### Columns 数据结构
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| text        | 选项的文字内容               | String|Number |               |
-| value          | 选项对应的值，且唯一               | String|Number |            |
-| children         | 用于级联选项               | Array | -                |
-| className                  | 添加额外的类名                   | String  |      |
+| text        | 选项的文字内容               | string \| number |   -            |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | array | -                |
+| className                  | 添加额外的类名                   | string  | -    |
 
 ### Events
 
@@ -406,19 +406,19 @@ columns 属性可以通过二维数组的形式配置多列选择。
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-picker-cancel-color| _#808080_  | -  |
-| --nut-picker-ok-color| _var(--nut-primary-color)_  | -  |
-| --nut-picker-bar-cancel-font-size| _14px_  | -  |
-| --nut-picker-bar-ok-font-size| _14px_  | -  |
-| --nut-picker-bar-button-padding| _0 15px_  | -  |
-| --nut-picker-bar-title-font-size| _16px_  | -  |
-| --nut-picker-bar-title-color| _var(--nut-title-color)_  | -  |
-| --nut-picker-bar-title-font-weight| _normal_  | -  |
-| --nut-picker-item-height| _36px_  | -  |
-| --nut-picker-item-text-color| _var(--nut-title-color)_  | -  |
-| --nut-picker-item-active-text-color| _inherit_  | -  |
-| --nut-picker-item-text-font-size| _14px_  | -  |
-| --nut-picker-item-active-line-border| _1px solid #d8d8d8_  | -  |
-| --nut-picker-columns-item-color| _var(--nut-title-color)_  | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- | 
+| --nut-picker-cancel-color| _#808080_  | 
+| --nut-picker-ok-color| _var(--nut-primary-color)_  | 
+| --nut-picker-bar-cancel-font-size| _14px_  | 
+| --nut-picker-bar-ok-font-size| _14px_  | 
+| --nut-picker-bar-button-padding| _0 15px_  | 
+| --nut-picker-bar-title-font-size| _16px_  | 
+| --nut-picker-bar-title-color| _var(--nut-title-color)_  | 
+| --nut-picker-bar-title-font-weight| _normal_  | 
+| --nut-picker-item-height| _36px_  | 
+| --nut-picker-item-text-color| _var(--nut-title-color)_  | 
+| --nut-picker-item-active-text-color| _inherit_  | 
+| --nut-picker-item-text-font-size| _14px_  | 
+| --nut-picker-item-active-line-border| _1px solid #d8d8d8_  | 
+| --nut-picker-columns-item-color| _var(--nut-title-color)_  | 

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

@@ -98,7 +98,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 
 ### 默认选中项
 
-通过设置 modelValue 实现默认选中项，modelValue 是一个包含每项配置 value 值的数组。
+通过设置 `modelValue` 实现默认选中项，`modelValue` 是一个包含每项配置 value 值的数组。
 
 :::demo
 ```html
@@ -181,7 +181,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 
 ### 多列展示
 
-columns 属性可以通过二维数组的形式配置多列选择。
+`columns` 属性可以通过二维数组的形式配置多列选择。
 
 :::demo
 ```html
@@ -233,7 +233,7 @@ columns 属性可以通过二维数组的形式配置多列选择。
 
 ### 多级联动
 
-使用 columns 属性的 children 字段可以实现选项级联的效果。
+使用 `columns` 属性的 `children` 字段可以实现选项级联的效果。
 
 :::demo
 ```html
@@ -311,7 +311,7 @@ columns 属性可以通过二维数组的形式配置多列选择。
 
 ### 异步获取
 
-在实际开发中，大部分情况 Columns 属性的数据是通过异步方式获取的。
+在实际开发中，大部分情况 `Columns` 属性的数据是通过异步方式获取的。
 
 :::demo
 ```html
@@ -364,26 +364,26 @@ columns 属性可以通过二维数组的形式配置多列选择。
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| v-model:value         | 默认选中项               | Array | []              |
-| columns         | 对象数组，配置每一列显示的数据               | Array | -                |
-| title                  | 设置标题                   | String  | -      |
-| cancel-text            | 取消按钮文案               | String  | 取消   |
-| ok-text                | 确定按钮文案               | String  | 确定   |
-| three-dimensional          | 是否开启3D效果               | Boolean  | true   |
-| swipe-duration         | 惯性滚动时长        | Number、String  | 1000   |
-| safe-area-inset-bottom 	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	Boolean	|`false`     |
-| visible-option-num          |可见的选项个数              | number \| string | 7               |
-| option-height         | 选项高度             | number \| string | 36     |
-| show-toolbar         | 是否显示顶部导航             | Boolean | true    |
+| v-model:value         | 默认选中项               | array | `[]`              |
+| columns         | 对象数组，配置每一列显示的数据               | array | -                |
+| title                  | 设置标题                   | string  | -      |
+| cancel-text            | 取消按钮文案               | string  | `取消`  |
+| ok-text                | 确定按钮文案               | string  | `确定`   |
+| three-dimensional          | 是否开启3D效果               | boolean  | `true`   |
+| swipe-duration         | 惯性滚动时长        | number \| string  | `1000`   |
+| safe-area-inset-bottom 	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	boolean	|`false`     |
+| visible-option-num          |可见的选项个数              | number \| string |`7`               |
+| option-height         | 选项高度             | number \| string | `36`     |
+| show-toolbar         | 是否显示顶部导航             | boolean | `true`   |
 
 ### Columns 数据结构
 
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| text        | 选项的文字内容               | String|Number |               |
-| value          | 选项对应的值，且唯一               | String|Number |            |
-| children         | 用于级联选项               | Array | -                |
-| className                  | 添加额外的类名                   | String  |      |
+| text        | 选项的文字内容               | string \| number |    -           |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | array | -                |
+| className                  | 添加额外的类名                   | string  |  -    |
 
 ### Events
 
@@ -406,19 +406,19 @@ columns 属性可以通过二维数组的形式配置多列选择。
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                                    | 默认值                     | 描述 |
-| --------------------------------------- | -------------------------- | ---- |
-| --nut-picker-cancel-color| _#808080_  | -  |
-| --nut-picker-ok-color| _var(--nut-primary-color)_  | -  |
-| --nut-picker-bar-cancel-font-size| _14px_  | -  |
-| --nut-picker-bar-ok-font-size| _14px_  | -  |
-| --nut-picker-bar-button-padding| _0 15px_  | -  |
-| --nut-picker-bar-title-font-size| _16px_  | -  |
-| --nut-picker-bar-title-color| _var(--nut-title-color)_  | -  |
-| --nut-picker-bar-title-font-weight| _normal_  | -  |
-| --nut-picker-item-height| _36px_  | -  |
-| --nut-picker-item-text-color| _var(--nut-title-color)_  | -  |
-| --nut-picker-item-active-text-color| _inherit_  | -  |
-| --nut-picker-item-text-font-size| _14px_  | -  |
-| --nut-picker-item-active-line-border| _1px solid #d8d8d8_  | -  |
-| --nut-picker-columns-item-color| _var(--nut-title-color)_  | -  |
+| 名称                                    | 默认值                     | 
+| --------------------------------------- | -------------------------- |
+| --nut-picker-cancel-color| _#808080_  | 
+| --nut-picker-ok-color| _var(--nut-primary-color)_  | 
+| --nut-picker-bar-cancel-font-size| _14px_  | 
+| --nut-picker-bar-ok-font-size| _14px_  | 
+| --nut-picker-bar-button-padding| _0 15px_  | 
+| --nut-picker-bar-title-font-size| _16px_  | 
+| --nut-picker-bar-title-color| _var(--nut-title-color)_  | 
+| --nut-picker-bar-title-font-weight| _normal_  | 
+| --nut-picker-item-height| _36px_  | 
+| --nut-picker-item-text-color| _var(--nut-title-color)_  | 
+| --nut-picker-item-active-text-color| _inherit_  | 
+| --nut-picker-item-text-font-size| _14px_  | 
+| --nut-picker-item-active-line-border| _1px solid #d8d8d8_  | 
+| --nut-picker-columns-item-color| _var(--nut-title-color)_  |