地址选择组件的开发,每一项都做好了注释,便于理解。组件在结构上分为两个部分,如图
html
- {{province}}
- {{city}}
- {{county}}
- {{town}}
-
{{item.name}}
-
{{item.name}}
-
{{item.name}}
-
{{item.name}}
其中con-select中存放是的图片中第一部分,下面的四个ul存放的是省市区镇的数据。点击“请选择”的时候需要平滑移动的效果,所以对下面四个ul用到了transition,具体用法可见vue官方教程。
data数据
data () {
return {
areaState: areaHandle.state, // 从组件内引入的地址所有数据,有缓存
loading: false,
address: {}, // 选中的省市区县
show: false,
province: '请选择', // 选择的省名称
provinceId: undefined,
city: '请选择', // 选择的市名称
cityId: undefined,
county: '请选择', // 选择的区名称
countyId: undefined,
town: '请选择', // 最后一级请选择
townId: undefined,
choiceProvince: false, // 省按钮的显示隐藏
choiceCity: false, // 市按钮的显示隐藏
choiceCounty: false, // 区按钮的显示隐藏
choiceTown: false, // 镇按钮的显示隐藏
showProvince: true, // 显示省列
showCity: false, // 显示市列
showCounty: false, // 显示区列
showTown: false // 显示镇列
}
}
方法
computed: {
methods: {
// 点击tab
getArea (k) {
['showCity', 'showCounty', 'showTown', 'showProvince'].forEach(e => { this[e] = false })
this[k] = true
},
// 点击选择省后
async getCity (pid, pname) {
this.province = pname // 选中的省
this.provinceId = pid
this.showProvince = false // 省列消失
this.choiceCity = true // 显示市按钮
this.showCity = true // 显示市列
this.city = '请选择'
this.choiceCounty = false // 隐藏区(非第一次选择)
this.choiceTown = false // 隐藏镇(非第一次选择)
},
// 点击选择市后
async getCounty (cid, cname) {
this.city = cname // 选中的市
this.cityId = cid
this.showCity = false // 市列消失
this.choiceCounty = true // 显示区按钮
this.showCounty = true // 显示区列
this.county = '请选择'
this.choiceTown = false // 隐藏镇(非第一次选择)
},
// 点击选择区后
async getTown (coid, coname) {
this.county = coname // 选中的区
this.countyId = coid
// 需要判断有没有四级地址,如果请求失败,走catch的部分,直接到此为止。如果请求成功,则显示四级地址
try {
await areaHandle.cacheArea('town', coid)
this.showCounty = false // 区列消失
this.showTown = true // 显示镇列
this.choiceTown = true // 显示镇按钮
} catch (error) {
this.town = ''
this.townId = undefined
this.upData()
}
},
// 点击选择镇后
getLast (tid, tname) {
this.town = tname
this.townId = tid
this.upData()
},
// 传值给父组件
upData () {
let addressNew = {
province: this.province,
city: this.city,
county: this.county,
town: this.town,
provinceId: this.provinceId,
cityId: this.cityId,
countyId: this.countyId,
townId: this.townId
}
Object.assign(this.address, addressNew)
this.$emit('address', this.address) // 选中的值传给父组件
this.show = false
},
// 关闭
close () {
this.show = false
}
}
其中每次点击选择的时候要调取接口获得数据,例如点击省获得市的数据,点击市获得区的数据,这部分的方法隐藏,可根据自己需要的情况适当的添加。