Index 索引选择器

概述

常用于通讯录、城市选择的索引选择器。

使用指南

在.vue中引入组件

<script>
    import iIndex from 'iview-mpvue/dist/components/index-list/index-list'
    export default {
        components: {
            'i-index': iIndex
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/index-list/style/css'

示例

<div class="i-index-demo">
    <i-index height="100%" :data-set="cities" i-item-class="i-index-demo-item" v-on:change="onChange"></i-index>
</div>

<script>
    import { cities } from './city' // 城市列表数据
    export default {
        ...
        data() {
            let storeCity = new Array(26)
            const words = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
            words.forEach((item,index)=>{
                storeCity[index] = {
                    key : item,
                    list : []
                }
            })
            cities.forEach((item)=>{
                let firstName = item.pinyin.substring(0,1)
                let index = words.indexOf( firstName )
                storeCity[index].list.push({
                    name : item.name,
                    key : firstName
                })
            })
            return {
                cities: storeCity
            }
        },
        methods: {
            onChange(opts) {
                // todo
            }
        }
    }
</script>

API

Index properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
height	容器 scroll-view 的高度，支持各种单位	String	300
item-height	选择项的高度，单位 px	Number	18
i-item-class	索引item自定义class类名	String	-

Index events

事件名	说明	返回值
v-on:change	选择项改变时触发	{index, current}