import{e as s,o as a,G as n}from"./vendor.eeaf2406.js";const t={class:"markdown-body"},l=[n('

Elevator 电梯楼层

介绍

用于列表快速定位以及索引的显示

安装

import { createApp } from 'vue';\n// vue\nimport { Elevator } from '@nutui/nutui';\n// taro\nimport { Elevator } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Elevator);\n

基本用法

<nut-elevator :index-list="dataList" :height="260" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>\n

setup() {\n    const state = reactive({\n      acceptKey: 'num',\n      dataList: [\n        {\n          title: 'A',\n          list: [\n            {\n              name: '安徽',\n              id: 1\n            }\n          ]\n        }\n        ...\n      ],\n      dataList2: [\n        {\n          num: '一',\n          list: [\n            {\n              name: '北京',\n              id: 1\n            }\n          ]\n        }\n        ...\n      ]\n    });\n\n    const clickItem = (key: string, item: any) => {\n      console.log(key, JSON.stringify(item));\n    };\n\n    const clickIndex = (key: string) => {\n      console.log(key);\n    };\n\n    return { ...toRefs(state), clickItem, clickIndex };\n  }\n

自定义索引

<nut-elevator :index-list="dataList2" :height="220" :acceptKey="acceptKey" @click-item="clickItem" @click-index="clickIndex"></nut-elevator>\n

API

Prop

字段	说明	类型	默认值
height	电梯区域的高度	Number、String	`200px`
accept-key	索引 key 值	String	`title`
index-list	索引列表	Array（item需包含 id、name属性）	`[{id: 0, name: ''}]`

Event

名称	说明	回调参数
click-item	点击内容	key: string, item: { id: 0, name: ‘’ }
click-index	点击索引	key: string

',15)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};