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