vue移动端城市列表按首字母排序组件包,有npm包,可直接下载使

2018-11-19  本文已影响0人  前端温童鞋

初衷,为各使用相关组件的小伙伴写更少的相关代码实现功能,源码在我的被另一篇博文里有,有兴趣的可以去研究,使用过程中有问题的请即时反馈,谢了!qq(微信)591339209,有其他常用到的组件也可以反馈给我,酌情封装!另外要是这个组件还有什么需要优化,或者有哪里使用还不方便的都请反馈一下,留言反馈也没问题。
效果图:


20180719165601791.png

需依赖包 better-scroll,

包名:wenlist

使用:yarn add wenlist

      npm indstall wenlist -s

demo:

<template>
    <div>
        <w-sortlist v-model="listData" @click="select" children="cities" relkey="core" label="name"></w-sortlist>
    </div>
</template>
<script>
    import listData from '../assets/js/city.js'
    import wSortlist from 'wenlist'
    export default {
        name: 'wSortListDemoVue',
        components: {
            wSortlist
        },
        data () {
            return {
                listData: listData
            }
        },
        methods: {
            select (data) {
                console.log(data, 'data')
            } 
        }
    }
</script>
<style scoped>
    
</style>

数据格式要求如下,字段名可以不一样,但格式要求一致,请在渲染该组件前自行处理数据,实在处理不了的也可以找我!

var cityData = [
    {
      name: "★热门城市",
      cities: [
        {
          name: "北京市",
          tags: "BEIJING,北京市",
          cityid: 1
        }
      ]
    },
    {
      name: "A",
      cities: [
        {
          name: "鞍山市",
          tags: "ANSHAN,鞍山市",
          cityid: 64
        }
      ]
    },
    {
      name: "B",
      cities: [
        {
          name: "北京市",
          tags: "BEIJING,北京市",
          cityid: 1
        }
      ]
    }
]

属性名 类型 描述
v-model Array 必填,数据源,有格式要求,必须遵守
label String 需要显示的字段,默认为'name'
children String 二级数组的字段名称,默认为‘children’
relkey String 索引字段,默认为‘id’
事件 参数
click 返回当前点击项的对象
上一篇下一篇

猜你喜欢

热点阅读