我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用
我们今天来实现一个 利用vuejs开发的 省市区三联动的组件 CitySelect.vue组件
首先来看一下最终的效果(没有写太多的样式...)
组件所需要的省市区的JSON数据(已经封装为commonjs模块了):
这个数据中有这样几个字段:
code: 当前省市区的编码
sheng: 当前所在的省
name: 省市区的名字
level: 级别,省 level = 1,市 level=2,区/县城 level = 3
di: 县,市级别的区分
如何使用?
这里采用了 v-model暴露接口,所以我们下拉选择的值,你只需要在 v-model绑定的属性中去拿即可
我们使用的字段是 cityInfo用于接收组件的数据,组件为了返回足够的数据,它是一个对象
使用代码示例 :
App.vue
vue 省市区三联动 demo
v-model的值是