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

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


vue移动端城市列表按首字母排序组件包,有npm包,可直接下载使用_第1张图片
20180719165601791.png

需依赖包 better-scroll,

包名:wenlist

使用:yarn add wenlist

      npm indstall wenlist -s

demo:





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

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 返回当前点击项的对象

你可能感兴趣的:(vue移动端城市列表按首字母排序组件包,有npm包,可直接下载使用)