mint-ui 通过popup和picker实现三级联动(编辑时设置默认值)
成果预览:准备工作:请有针对性的查看以下文档:vue组件以及父子组件传值、mint-ui中的popup和picker。(本文不涉及,请自行查阅)省市区三级数据源:https://github.com/artiely/Administrative-divisions-of-China (由于业务需要,我使用的公司统一数据,但格式不变)实现代码:在对应的文件目录下新建:add...
·
成果预览:
准备工作:
请有针对性的查看以下文档:vue组件以及父子组件传值、mint-ui中的popup和picker。(本文不涉及,请自行查阅)
省市区三级数据源:https://github.com/artiely/Administrative-divisions-of-China (由于业务需要,我使用的公司统一数据,但格式不变)
实现代码:
在对应的文件目录下新建:addressEdit.vue文件,以实现上放预览图页面。其中省市区联动部分引用公用组件:addressPicker.vue。
代码如下:
addressEdit.vue
<template>
<div class="root editPsw" :style="'min-height:'+allHeight +'px'">
<div class="form">
<mt-field class="underLine" placeholder="收货人姓名" v-model="name"></mt-field>
<mt-field class="underLine" placeholder="手机号" type="tel" v-model="phone"></mt-field>
<addressPicker class="underLine" :address="address" @choiceAddress='choiceAddress'></addressPicker>
<mt-field placeholder="详细地址" type="textarea" rows="4" v-model="addressdetail"></mt-field>
</div>
<div class="btn">
<p class="subEdit" v-if="type == '0'" @click="addSave()">保存</p>
<p class="subEdit" v-else @click="editSave()">确认修改</p>
</div>
</div>
</template>
<script>
import addressPicker from '../../../common/addressPicker.vue'
import { Toast } from 'mint-ui'
export default {
data () {
return {
type: this.$route.params.type,
allHeight: 0,
addressID: '',
name: '',
phone: '',
address: '省,市,区',
addressdetail: '',
IsDefault: 1
}
},
components: {addressPicker},
methods: {
// 接受子组件的值
choiceAddress (data) {
this.address = data
},
addSave () {
},
editSave () {
}
},
beforeMount () {
this.type = Number(this.$route.params.type)
if (this.type !== 0 && this.type !== 1 && this.type !== 2) {
alert('警告:网址错误')
}
if (this.type === 1) {
let addressInfo = JSON.parse(localStorage.getItem('addressInfo'))
this.name = addressInfo.Name
this.phone = addressInfo.Phone
this.address = addressInfo.Province + ',' + addressInfo.City + ',' + addressInfo.Region
this.addressdetail = addressInfo.Address
this.IsDefault = addressInfo.IsDefault ? 1 : 0
this.addressID = addressInfo.ID
}
},
mounted () {
this.allHeight = document.documentElement.clientHeight
}
}
</script>
<style scoped lang='scss'>
.root {
background-color: #faf9f7;
padding-top: 0.265rem;
}
</style>
addressPicker.vue
<template>
<div>
<div class="page-content">
<!-- <mt-cell title="省,市,区:" :value="areaString" is-link @click.native="handlerArea"></mt-cell> -->
<mt-cell :title="areaString" :value="areaString" is-link @click.native="handlerArea"></mt-cell>
<mt-popup v-model="areaVisible" class="area-class" position="bottom">
<p>
<span @click="cancel()">取消</span><span class="btn" @click="sub()">确定</span>
</p>
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
</mt-popup>
</div>
</div>
</template>
<script>
import data from '../../../static/city2.js'
var index = 0
var index2 = 0
// 初始化省
let province = data.map(res => {
return res.name
})
// 初始化市
let city = data[index].children.map(res => {
return res.name
})
// 初始化区
let area = data[index].children[index2].children.map(res => {
return res
})
export default {
props: ['address'],
data () {
return {
areaVisible: false,
areaString: '请选择',
slots: [{
flex: 1,
values: province,
className: 'slot1',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: city,
className: 'slot3',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot4'
}, {
flex: 1,
values: area,
className: 'slot5',
textAlign: 'center'
}]
}
},
components: {},
methods: {
handlerArea () {
this.areaVisible = true
if (this.areaString === '省,市,区') { this.areaString = province[0] + ',' + city[0] + ',' + area[0] }
},
onValuesChange (picker, values) {
let one = values[0]
let two = values[1]
index = province.indexOf(one)
if (index >= 0 && province.length > 0) {
city = data[index].children.map(res => {
return res.name
})
picker.setSlotValues(1, city)
two = values[1]
}
index2 = city.indexOf(two)
if (index2 >= 0 && city.length > 0) {
area = data[index].children[index2].children.map(res => {
return res
})
picker.setSlotValues(2, area)
}
this.areaString = values.join(',')
this.$emit('choiceAddress', this.areaString)
},
sub () {
this.$emit('choiceAddress', this.areaString)
this.areaVisible = false
},
cancel () {
this.areaVisible = false
}
},
mounted () {
this.areaString = this.address
}
}
</script>
<style scoped lang='scss'>
@import "./base.scss";
.area-class {
width: 100% !important;
p {
height: 1.066rem;
padding: 0.165rem;
line-height: 0.736rem;
display: flex;
justify-content: space-between;
font-size: $base_fontSize;
border: 1px solid #e6e6e6;
span {
padding: 0 0.5rem;
}
.error {
// background-color: #f7b500;
color: #f7b500;
// border: 1px solid #f7b500;
}
.btn {
@extend .error;
font-size: px2em(15, 16);
}
}
}
</style>
以上代码并不算完。你会发现此时三级联动已经可以了,并可以进行地址的添加,但是编辑的时候如何设置默认值(预览图3)
思路就是如果当前页面是编辑页面。那么重新对以下三个参数进行修改
思路:拿到父组件传过来的省市区,然后去判断当前省市区在三个数组中的索引值分别是什么,对应在data中的slots中设置 defaultIndex, value两个参数用于设置默认索引和默认值。如图:
更多推荐
已为社区贡献12条内容
所有评论(0)