更新记录

v1.0.2（2019-07-11） 下载此版本

兼容H5

平台兼容性

uni-select城市选择组件

主要功能：

1. 自定义模块面板样式

2. 类别与列表联动

自定义属性说明：

listData属性说明：

listData为传入组件的列表数据，不同应用定义的数据结构可能不一样，开发者需将源码中定义的字段改为自己所需的字段。

quickPanelData属性说明：[object,object]，所有快捷面板的集合，数组元素为Object

object 说明：

navAttr属性说明：

listAttr属性说明：

可触发的事件

使用方式：

<template>
    <view class="content">
        <uni-select :listData="listData" :quickPanelData="quickPanelData" @chooseItem="chooseItem"></uni-select>
    </view>
</template>

<script>
    import city from '../../common/city.js'
    import uniSelect from '../../components/lee-select/lee-select.vue'
    export default {
        components:{
            uniSelect
        },
        data() {
            return {
                listData: city,
                quickPanelData:[
                    {
                    title:'当前城市',
                    navName: '当前',
                    data:['上海'],
                    height: 150
                },
                {
                    title:'热门城市',
                    navName: '热',
                    data:['上海','北京','成都','昆明','西安'],
                    height: 224
                }
                ]
            }
        },
        methods: {
            chooseItem(item) {
                console.log(item)
            }
        },
        onLoad() {

        }
    }
</script>

<style lang="scss" scoped>
    .content {
        height: 100vh;
    }
</style>

/* city.js示例 数据需提前处理好*/
let cityData = [
{
        "initial": "A",
        "list": [{
                "code": "0997",
                "name": "阿克苏",
                "pinyin": "Akesu",
                "label": "Akesu0997"
            },
            {
                "code": "0837",
                "name": "阿坝",
                "pinyin": "Aba",
                "label": "Aba0837"
            },
            {
                "code": "0483",
                "name": "阿拉善盟",
                "pinyin": "Alashanmeng",
                "label": "Alashanmeng0483"
            }],
},
{
        "initial": "B",
        "list": [{
                "code": "010",
                "name": "北京",
                "pinyin": "Beijing",
                "label": "Beijing010"
            },
            {
                "code": "0436",
                "name": "白城",
                "pinyin": "Baicheng",
                "label": "Baicheng0436"
            },
            {
                "code": "0776",
                "name": "百色",
                "pinyin": "Baise",
                "label": "Baise0776"
            },
            {
                "code": "0439",
                "name": "白山",
                "pinyin": "Baishan",
                "label": "Baishan0439"
            },
            {
                "code": "0943",
                "name": "白银",
                "pinyin": "Baiyin",
                "label": "Baiyin0943"
            }
}]