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

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

对你有帮助的话就帮我扫一下支付宝红包呗,不要的扫给我也可以,谢谢了各位,有啥需要可以在下方留言,多金大佬也可以打赏些小费。

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

需依赖包   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,组件,城市列表)