浏览代码

docs(elevator): add elevator docs

suzigang 4 年之前
父节点
当前提交
43e478664b
共有 1 个文件被更改,包括 59 次插入5 次删除
  1. 59 5
      src/packages/__VUE/elevator/doc.md

+ 59 - 5
src/packages/__VUE/elevator/doc.md

@@ -14,7 +14,60 @@ import { Elevator } from '@nutui/nutui';
 import { Elevator } from '@nutui/nutui-taro';
 
 const app = createApp();
-app.use(Elevator).use(Icon);
+app.use(Elevator);
+
+```
+
+### 基本用法
+
+```js
+<nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
+
+setup() {
+    const state = reactive({
+      acceptKey: 'num',
+      dataList: [
+        {
+          title: 'A',
+          list: [
+            {
+              name: '安徽',
+              id: 1
+            }
+          ]
+        }
+        ...
+      ],
+      dataList2: [
+        {
+          num: '一',
+          list: [
+            {
+              name: '北京',
+              id: 1
+            }
+          ]
+        }
+        ...
+      ]
+    });
+
+    const clickItem = (key: string, item: any) => {
+      console.log(key, JSON.stringify(item));
+    };
+
+    const clickIndex = (key: string) => {
+      console.log(key);
+    };
+
+    return { ...toRefs(state), clickItem, clickIndex };
+  }
+```
+
+### 自定义索引
+
+```js
+<nut-elevator :index-list="dataList2" :height="220" :acceptKey="acceptKey" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>
 
 ```
 
@@ -24,14 +77,15 @@ app.use(Elevator).use(Icon);
 
 | 字段                   | 说明                                                             | 类型    | 默认值 |
 |------------------------|----------------------------------------------------------------|---------|------|
-| show-indicator         | 是否显示索引值提示符                                                         | Boolean  | `true`     |
-| init-index             | 初始化进入后,当前定位到的索引值                                                        | Number/String  | `0`    |
-| index-list             | 索引字符列表                                                         | String[]  | -     |
+| height                 | 电梯区域的高度                                                    | Number、String  | `200px`
+| accept-key             | 索引 key 值                                                      | String  | `title` |
+| index-list             | 索引列表                                                         | Array(item需包含 id、name属性)  | `[{id: 0, name: ''}]` |
 
 ### Event
 
 | 名称  | 说明     | 回调参数    |
 |-------|----------|-------------|
-| click | 点击事件 | event:Event |
+| click-item | 点击内容 | key: string, item: { id: 0, name: '' } |
+| click-index | 点击索引 | key: string |