docs: 文档修改 (#2025)

* fix: popover

* fix: 代码回退

* feat: 文档修改

* feat: 修改Imagepreview

* feat: imagepreview文案修改

* feat: noticebar文案修改

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

* feat: 组件文档修改picker

* docs: 文案修改

* docs: countdown

* feat: image

* docs: 文本修改

* fix: imagepreview

* docs: 单位修改

* docs: 文档修噶

* docs: actionsheet文档修改

* docs: 文档修改

* fix: drag使用公共函数

* docs: 文案更新

* feat: 文档修改

* feat: 文案修改

* feat: picker文案修改

* feat: picker

* feat: 文案修改

* fix: 多余Props删除

* feat: 文档修改

* feat: docs修改

* fix: picker修改

src/packages/__VUE/comment/demo.vue

@@ -47,7 +47,7 @@
       </nut-comment>
     </nut-cell>
 
-    <h2>{{ translate('additionalReview') }}</h2>
+    <h2>{{ translate('additionalReviewd') }}</h2>
     <nut-cell>
       <nut-comment
         imagesRows="multi"
@@ -72,7 +72,7 @@ const initTranslate = () =>
       basic: '基础用法',
       single: '评论图片单行展示',
       multiRow: '评论图片多行展示',
-      additionalReview: '追评展示'
+      additionalReviewd: '追评展示'
     },
     'en-US': {
       basic: 'Basic Usage',

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

@@ -200,7 +200,7 @@ Slots are defined in some areas and can be replaced as required
 | comment-labels  | Comment user label | 
 | comment-shop-reply  | At the bottom of the comment is the display of the merchant's response | 
 
-### images Data
+### images data
 
 ```javascript
 const images = [{
@@ -210,7 +210,7 @@ const images = [{
 }]
 ```
 
-### videos Data
+### videos data
 
 ```javascript
 const videos = [{
@@ -219,10 +219,10 @@ const videos = [{
 }]
 ```
 
-### info Data
+### info data
 
 ```javascript
-const info = [{
+const info = {
   "content": "",  // Comment on the details
   "nickName": "", // The name of the reviewer
   "score": 5, // Number of comment stars
@@ -231,8 +231,19 @@ const info = [{
   "size": "", // Comment good size
   "replay":23, // Number of replies to this comment
   "like":1, // Number of likes for this comment
-}]
+}
 ```
+
+### follow data
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // Review how many days after purchase
+  "content": "", // Review content
+  "images": [] // Review images
+}
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/comment/doc.md

@@ -40,7 +40,6 @@ app.use(Comment);
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import { Dongdong } from '@nutui/icons-vue';
 export default {
   setup() {
     let cmt = ref({});
@@ -226,7 +225,7 @@ const videos = [{
 用于存放评论相关的信息。
 
 ```javascript
-const info = [{
+const info = {
   "content": "",  // 评论详情
   "nickName": "", // 评论人的姓名
   "score": 5, // 评论星星数
@@ -235,8 +234,21 @@ const info = [{
   "size": "", // 评论人购买的商品规格
   "replay":23, // 此评论的回复数
   "like":1, // 此评论的点赞数
-}]
+}
 ```
+
+### follow 对象
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // 购买多少天后进行追评
+  "content": "", // 追评内容
+  "images": [] // 追评图片
+}
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -228,7 +228,7 @@ const videos = [{
 用于存放评论相关的信息。
 
 ```javascript
-const info = [{
+const info = {
   "content": "",  // 评论详情
   "nickName": "", // 评论人的姓名
   "score": 5, // 评论星星数
@@ -237,9 +237,20 @@ const info = [{
   "size": "", // 评论人购买的商品规格
   "replay":23, // 此评论的回复数
   "like":1, // 此评论的点赞数
-}]
+}
 ```
 
+### follow 对象
+
+用于存放追评相关的信息。
+
+```javascript
+const follow = {
+  "days": 0, // 购买多少天后进行追评
+  "content": "", // 追评内容
+  "images": [] // 追评图片
+}
+
 ## 主题定制
 
 ### 样式变量

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

@@ -238,8 +238,8 @@ app.use(DatePicker);
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
-        time = selectedOptions.slice(3).map((op) => op.value).join(':');
+        const date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
+        const time = selectedOptions.slice(3).map((op) => op.value).join(':');
         showToast.text(selectedOptions[0].text + 'Year' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
@@ -417,6 +417,15 @@ app.use(DatePicker);
 | top  | Custom content top columns |
 
 
+### Data Structure of PickerOption
+
+| Key         | Description                             | Type   | Default           |
+|--------------|----------------------------------|--------|------------------|
+| text        | Text of column              | string \| number | -             |
+| value          | Value of column               | string \| number |   -        |
+| children         | Cascader Option              | Array | -                |
+| className                  | Extra CalssName                   | string  |  -    |
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/datepicker/doc.md

@@ -244,8 +244,8 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
-        time = selectedOptions.slice(3).map((op) => op.value).join(':');
+        const date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
+        const time = selectedOptions.slice(3).map((op) => op.value).join(':');
         showToast.text(selectedOptions[0].text + '年' + date + ' ' + time);
       }
       const formatter = (type: string, option) => {
@@ -424,6 +424,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 | default  | 自定义滑动数据底部区域 |
 | top  | 自定义滑动数据顶部区域 |
 
+### PickerOption 数据结构
+
+| 键名         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| text        | 选项的文字内容               | string \| number |   -            |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | Array | -                |
+| className                  | 添加额外的类名                   | string  | -    |
+
 ## 主题定制
 
 ### 样式变量

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

@@ -30,13 +30,17 @@ app.use(DatePicker);
 
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const minDate = new Date(2020, 0, 1);
       const maxDate = new Date(2025, 10, 1);
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ({ selectedValue, selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(''));
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(''),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -123,11 +127,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        console.log(selectedOptions.map((val: any) => val.text).join('-'));
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join('-'),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -157,13 +165,17 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup() {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
         date = selectedValue.slice(0, 3).join('-');
         time = selectedValue.slice(3).join(':');
-        console.log(date + ' ' + time) ;
+        Taro.showToast({
+          title:date + ' ' + time,
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -192,11 +204,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        console.log(selectedValue.join(':'));
+         Taro.showToast({
+          title:selectedValue.join(':'),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -229,13 +245,17 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
-        time = selectedOptions.slice(3).map((op) => op.value).join(':');
-        console.log(selectedOptions[0].text + '年' + date + ' ' + time);
+        const date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
+        const time = selectedOptions.slice(3).map((op) => op.value).join(':');
+        Taro.showToast({
+          title:selectedOptions[0].text + '年' + date + ' ' + time,
+          icon:'none'
+        });
       }
       const formatter = (type: string, option) => {
         switch (type) {
@@ -286,11 +306,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 10, 10);
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        console.log(selectedValue.join(':')) ;
+        Taro.showToast({
+          title:selectedValue.join(':'),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -324,6 +348,7 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const currentDate = new Date(2022, 4, 10, 0, 0);
@@ -354,7 +379,10 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
         return options;
       };
       const confirm = ( { selectedValue, selectedOptions } )=>{
-        console.log(selectedOptions.map((option) => option.text).join(''));
+        Taro.showToast({
+          title:selectedOptions.map((option) => option.text).join(''),
+          icon:'none'
+        });
       }
       return {
         currentDate,
@@ -407,6 +435,15 @@ DatetimePicker 通过 `type` 属性来定义需要选择的时间类型。将 `t
 | default  | 自定义滑动数据底部区域 |
 | top  | 自定义滑动数据顶部区域 |
 
+### PickerOption 数据结构
+
+| 键名         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| text        | 选项的文字内容               | string \| number |   -            |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | Array | -                |
+| className                  | 添加额外的类名                   | string  | -    |
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/picker/Column.vue

@@ -89,7 +89,7 @@ export default create({
     const roller = ref(null);
 
     const moving = ref(false);
-    const touchDeg = ref(0);
+    const touchDeg = ref<string | number>(0);
     const touchTime = ref(0);
 
     const DEFAULT_DURATION = 200;
@@ -134,16 +134,19 @@ export default create({
         let dom = roller.value as any;
         const { transform } = window.getComputedStyle(dom);
         if (props.threeDimensional) {
-          const circle = Math.floor(touchDeg.value / 360);
+          const circle = Math.floor(parseInt(touchDeg.value as string) / 360);
           const cos = +transform.split(', ')[5];
           const sin = +transform.split(', ')[6] < 0 ? 180 : 0;
           const endDeg = circle * 360 + (Math.acos(cos) / Math.PI) * 180 + sin;
+
           state.scrollDistance = -Math.abs((endDeg / state.rotation - 1) * +props.optionHeight);
         } else {
           state.scrollDistance = +transform.slice(7, transform.length - 1).split(', ')[5];
         }
       }
 
+      preventDefault(event, true);
+
       state.touchParams.startY = touch.deltaY.value;
       state.touchParams.startTime = Date.now();
       state.transformY = state.scrollDistance;

src/packages/__VUE/picker/common.ts

@@ -106,10 +106,12 @@ export const componentWeapp = {
           }
         });
       } else {
-        columnsList.value.forEach((item) => {
-          defaultIndexs.push(0);
-          defaultValues.value.push(item[0].value);
-        });
+        if (columnsList && columnsList.value.length > 0) {
+          columnsList.value.forEach((item) => {
+            defaultIndexs.push(0);
+            item.length > 0 && defaultValues.value.push(item[0].value);
+          });
+        }
       }
 
       return defaultIndexs;
@@ -124,9 +126,10 @@ export const componentWeapp = {
         if (prevDefaultValue[index] != col) changeIndex = index;
       });
 
-      defaultIndexes.value = data.detail.value;
       // 选择的是哪个 option
       changeHandler(changeIndex, columnsList.value[changeIndex][data.detail.value[changeIndex]]);
+
+      defaultIndexes.value = defaultValuesConvert();
     };
 
     // 确定

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

@@ -382,8 +382,7 @@ 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 | -                |
+| columns         | Columns data              | PickerOption[] \| PickerOption[][] | -                |
 | title                  | Toolbar title                   | string  | -      |
 | cancel-text            | Text of cancel button               | string  | `cancel`   |
 | ok-text                | Text of confirm button               | string  | `confirm`   |
@@ -393,14 +392,6 @@ Use the children field of the Columns attribute to cascade options
 | option-height         | Option height             | number \| string | `36`     |
 | show-toolbar         | Whether to show toolbar             | boolean | `true`    |
 
-### Data Structure of Columns
-
-| Key         | Description                             | Type   | Default           |
-|--------------|----------------------------------|--------|------------------|
-| text        | Text of column              | string \| number | -             |
-| value          | Value of column               | string \| number |   -        |
-| children         | Cascader Option              | Array | -                |
-| className                  | Extra CalssName                   | string  |  -    |
 
 ### Events
 
@@ -417,6 +408,15 @@ Use the children field of the Columns attribute to cascade options
 | default  | Custom content bottom columns |
 | top  | Custom content top columns |
 
+### Data Structure of PickerOption
+
+| Key         | Description                             | Type   | Default           |
+|--------------|----------------------------------|--------|------------------|
+| text        | Text of column              | string \| number | -             |
+| value          | Value of column               | string \| number |   -        |
+| children         | Cascader Option              | Array | -                |
+| className                  | Extra CalssName                   | string  |  -    |
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/picker/doc.md

@@ -377,7 +377,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | v-model:value         | 默认选中项               | Array | `[]`              |
-| columns         | 对象数组，配置每一列显示的数据               | Array | -                |
+| columns         | 对象数组，配置每一列显示的数据               | PickerOption[] \| PickerOption[][] | -                |
 | title                  | 设置标题                   | string  | -      |
 | cancel-text            | 取消按钮文案               | string  | `取消`   |
 | ok-text                | 确定按钮文案               | string  | `确定`   |
@@ -387,14 +387,6 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | option-height         | 选项高度             | number \| string | `36`     |
 | show-toolbar         | 是否显示顶部导航             | boolean | `true`    |
 
-### Columns 数据结构
-
-| 键名         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| text        | 选项的文字内容               | string \| number |   -            |
-| value          | 选项对应的值，且唯一               | string \| number |     -       |
-| children         | 用于级联选项               | Array | -                |
-| className                  | 添加额外的类名                   | string  | -    |
 
 ### Events
 
@@ -411,6 +403,15 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | default  | 自定义滑动数据底部区域 |
 | top  | 自定义滑动数据顶部区域 |
 
+### PickerOption 数据结构
+
+| 键名         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| text        | 选项的文字内容               | string \| number |   -            |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | Array | -                |
+| className                  | 添加额外的类名                   | string  | -    |
+
 ## 主题定制
 
 ### 样式变量

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

@@ -23,6 +23,7 @@ app.use(Picker);
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const columns = ref([
@@ -36,7 +37,10 @@ app.use(Picker);
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(','))
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
 
       return {columns, confirm};
@@ -113,6 +117,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const selectedValue = ref(['ZheJiang']);
@@ -127,7 +132,10 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(','))
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
 
       return {columns,selectedValue, confirm};
@@ -155,6 +163,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const selectedValue = ref(['ZheJiang']);
@@ -169,7 +178,10 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(','))
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
 
       return { columns,selectedValue, confirm};
@@ -197,6 +209,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const selectedTime = ref(['Wednesday','Afternoon']);
@@ -218,10 +231,14 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-        console.log(selectedOptions.map((val: any) => val.text).join(','))
+        Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
       const change = ({ selectedValue,selectedOptions }) => {
         console.log(selectedValue);
+
       };
 
       return {multipleColumns,change, confirm, selectedTime};
@@ -247,6 +264,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const selectedCascader = ref(['FuJian', 'FuZhou','TaiJiang']);
@@ -298,7 +316,10 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       ]);
     
       const confirm = ( { selectedValue,selectedOptions })=>{
-         console.log(selectedOptions.map((val: any) => val.text).join(','))
+         Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
      
 
@@ -325,6 +346,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 </template>
 <script lang="ts">
   import { ref, onMounted } from 'vue';
+  import Taro from '@tarojs/taro'
   export default {
     setup(props) {
       const asyncColumns = ref([]);
@@ -347,7 +369,10 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
       });
       
       const confirm = ( { selectedValue,selectedOptions })=>{
-         console.log(selectedOptions.map((val: any) => val.text).join(','))
+         Taro.showToast({
+          title:selectedOptions.map((val: any) => val.text).join(','),
+          icon:'none'
+        });
       }
 
       return {asyncColumns,asyncValue, confirm};
@@ -365,7 +390,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | v-model:value         | 默认选中项               | Array | `[]`              |
-| columns         | 对象数组，配置每一列显示的数据               | Array | -                |
+| columns         | 对象数组，配置每一列显示的数据               | PickerOption[] \| PickerOption[][] | -                |
 | title                  | 设置标题                   | string  | -      |
 | cancel-text            | 取消按钮文案               | string  | `取消`  |
 | ok-text                | 确定按钮文案               | string  | `确定`   |
@@ -375,14 +400,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | option-height         | 选项高度             | number \| string | `36`     |
 | show-toolbar         | 是否显示顶部导航             | boolean | `true`   |
 
-### Columns 数据结构
 
-| 键名         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| text        | 选项的文字内容               | string \| number |    -           |
-| value          | 选项对应的值，且唯一               | string \| number |     -       |
-| children         | 用于级联选项               | Array | -                |
-| className                  | 添加额外的类名                   | string  |  -    |
 
 ### Events
 
@@ -399,6 +417,15 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | default  | 自定义滑动数据底部区域 |
 | top  | 自定义滑动数据顶部区域 |
 
+### PickerOption 数据结构
+
+| 键名         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| text        | 选项的文字内容               | string \| number |    -           |
+| value          | 选项对应的值，且唯一               | string \| number |     -       |
+| children         | 用于级联选项               | Array | -                |
+| className                  | 添加额外的类名                   | string  |  -    |
+
 ## 主题定制
 
 ### 样式变量