uniapp-省市区三级联动的实现
uniapp-省市区三级联动插件地址:https://ext.dcloud.net.cn/plugin?id=1301目前还是个前端小白,所以都是找别人的插件来使用,如果有更好的求分享!!!导入插件我是用Hbuilder直接导入:遇到的错误报错:Avoid using non-primitive value as key, use string/number value instead. 09:3
uniapp-省市区三级联动
插件地址:https://ext.dcloud.net.cn/plugin?id=1301
目前还是个前端小白,所以都是找别人的插件来使用,如果有更好的求分享!!!
导入插件
我是用Hbuilder直接导入:
遇到的错误
报错:
Avoid using non-primitive value as key, use string/number value instead. 09:39:45.540 found in
解决:
v-for循环里,key值重复
报错:Duplicate keys detected: ‘[object Object]’. This may cause an update error.
09:41:20.954 found in
解决:还是键值的问题,检测到重复的键值
修改插件中的代码:
v-for="(item,index) in cityData" :key=“index”
修改内容
修改:
1.将原插件的四级联动修改成了三级联动
2.在最后一次地区选择方法中,加入一个返回值,可以返回给input标签
this.bb=this.province+" “+this.city+” "+this.area;
this.$emit(“conceal”,this.bb);
3.可以修改插件的高度
this.heightCot = (res.safeArea.height * 2) / 3
4.设置插件弹出时机
通过设置popup初始为false
点击输入框 设置 this.popup=true
代码
插件的内容
erha-picker.vue
<template>
<view>
<view class="ifshow" @click="showList">
<view class="level-container">
<ul class="name-list">
<li :class="showIndex==0?'select':''" @click="anewSelect(0)">{{province}}</li>
<li :class="showIndex==1?'select':''" @click="anewSelect(1)" v-if="showIndex>=1">{{city}}</li>
<li :class="showIndex==2?'select':''" @click="anewSelect(2)" v-if="showIndex>=2">{{area}}</li>
<!-- <li :class="showIndex==3?'select':''" @click="anewSelect(3)" v-if="showIndex>=3">{{street}}</li> -->
</ul>
<ul v-if="showIndex==0" class="content" :style="'height:'+ heightCot + 'rpx'">
<li @click="selectPro(index,item.label)" v-for="(item,index) in provinceData" :key="index">{{item.label}}</li>
</ul>
<ul v-if="showIndex==1" class="content" :style="'height:'+ heightCot + 'rpx'">
<li @click="selectCity(index,item.label)" v-for="(item,index) in cityData" :key="index">{{item.label}}</li>
</ul>
<ul v-if="showIndex==2" class="content" :style="'height:'+ heightCot + 'rpx'">A
<li @click="selectaArea(index,item.label)" v-for="(item,index) in areaData" :key="index">{{item.label}}</li>
</ul>
<!--
<ul v-if="showIndex==3" class="content" :style="'height:'+ heightCot + 'rpx'">
<li @click="selectStreet(index,item)" v-for="(item,index) in streetsData" :key="index">{{item}}</li>
</ul> -->
</view>
</view>
</view>
</template>
<script>
import provinceData from './city-data/province.js';
import getCity from './city-data/city.js';
import getArea from './city-data/area.js';
// import getStreets from './city-data/streets.js';
export default {
data() {
return {
province: "请选择",
city: "请选择",
area: "请选择",
// street: "请选择",
cityDataAll: '', // 市的所有數據
getAreaAll: '', // 区的所有数据
// getStreetsAll: '', // 街道的所有数据
presentIndex: [],
proIndex: 0,
cityIndex: 0,
areaIndex: 0,
provinceData: '', // 当前展示的省数据
cityData: '', // 当前展示的市数据
areaData: '', //当前展示的区数据
// streetsData: '', //当前展示的区数据
showIndex: 0,
heightCot: 0,
bb: 0
}
},
created() {
uni.getSystemInfo({
success: res => {
// 设置组件所占高度
// console.log(res.safeArea.height)
this.heightCot = (res.safeArea.height * 2) / 3
}
})
},
mounted() {
// console.log(provinceData)
this.provinceData = provinceData;
this.cityDataAll = getCity;
this.getAreaAll = getArea;
// this.getStreetsAll = getStreets
},
methods: {
showList(e){
console.log("111111")
},
anewSelect(num) {
switch (num) {
case 0:
this.showIndex = 0;
this.areaData = [];
// this.streetsData = [];
this.city = '请选择';
this.area = '请选择';
// this.street = '请选择'
break;
case 1:
this.showIndex = 1;
this.areaData = [];
// this.streetsData = [];
this.area = '请选择';
// this.street = '请选择'
break;
case 2:
console.log(11111);
break;
}
},
selectPro(index, label) {
console.log(index)
const {
cityDataAll
} = this;
this.proIndex = index; // 当前省的下标
this.province = label;
this.cityData = cityDataAll[index];
this.showIndex = 1;
},
selectCity(index, label) {
const {
proIndex
} = this;
//当前选择的地区下标
// console.log(this.getAreaAll)
this.city = label;
this.cityIndex = index; // 当前市的下标
this.areaData = this.getAreaAll[proIndex][index];
this.showIndex = 2;
},
selectaArea(index, label) {
const {
proIndex,
cityIndex
} = this;
this.area = label;
this.showIndex = 3;
this.bb=this.province+" "+this.city+" "+this.area;
// console.log(this.bb);
this.$emit("conceal",this.bb);
}
}
}
</script>
<style lang="less">
.ifshow{
}
ul,li{
list-style: none;
}
.level-container {
width: 100%;
background: #ffffff;
position: fixed;
bottom: 0;
.select {
color: red;
position: relative;
&::after {
content: '';
width: 40rpx;
height: 6rpx;
background: red;
position: absolute;
left: 50%;
bottom: -8rpx;
margin-left: -20rpx;
}
}
li {
font-size: 26rpx;
}
.content,
.name-list {
padding: 0 20rpx;
}
.title {
font-size: 32rpx;
margin: 30rpx 20rpx;
}
.name-list {
display: flex;
li {
margin-right: 40rpx;
padding-bottom: 6rpx;
}
}
.content {
margin-top: 20rpx;
height: 600rpx;
overflow-y: auto;
li {
border-bottom: 1px solid #f1f1f1;
padding: 20rpx 0;
}
li:last-child {
border-bototm: none !important;
}
}
}
</style>
主页代码:
<template>
<view class="item">
<ehPicker @conceal="conceal" v-if="popup" />
<view class="list11 f-r a-c">
<text>选择地区</text>
<input type="text" placeholder="选择省/市/区" v-model="address1" @click="add" />
</view>
<view class="p-t-20">
<button style="background-color: #4a95df; color: #FFFFFF;" type="default" @click="addAddress">保存</button>
</view>
</view>
</template>
<script>
import ehPicker from '@/components/erha-picker/erha-picker.vue';
export default {
data() {
return {
name:'',
phone:'',
address:'',
address1:'',
address2:'',
popup:false
}
},
methods:{
addAddress:e=>{
console.log("已添加")
}
},
components:{
ehPicker
},
methods:{
add(e){
this.popup=true
},
conceal(param) {
// 获取到传过来的 省 市 区 县数据
console.log("22222222");
// 选择完毕后隐藏
this.popup = false;
this.address1 = param;
},
addAddress(e){
console.log("已添加")
}
}
}
</script>
<style>
</style>
实现效果
更多推荐
所有评论(0)