移动端V1.0
This commit is contained in:
211
components/complex-picker-region/complex-picker-region.vue
Normal file
211
components/complex-picker-region/complex-picker-region.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view style="background-color: white;padding: 5rpx;">
|
||||
<view class="center">
|
||||
<view style="margin-right: 20rpx;">
|
||||
{{label}}:
|
||||
</view>
|
||||
<uni-easyinput style="padding: 5rpx;" @focus="open" trim="all" v-model="selctValue"
|
||||
placeholder="请选择"></uni-easyinput>
|
||||
</view>
|
||||
<uni-popup ref="popup" type="bottom">
|
||||
<view style="height: 60vh;background-color: white;padding: 20rpx;padding-top: 40rpx;">
|
||||
<uni-row>
|
||||
<uni-col :span="4" :offset="0">
|
||||
<view class="demo-uni-col center">
|
||||
<span @click.stop="cancle" style="color: rgba(69, 90, 100, 0.6);">
|
||||
取 消
|
||||
</span>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="14" :offset="1">
|
||||
<view class="center" v-if="filterable">
|
||||
<uni-easyinput v-model="search" focus placeholder="输入关键字过滤"
|
||||
@input="inputChange"></uni-easyinput>
|
||||
</view>
|
||||
|
||||
</uni-col>
|
||||
<uni-col :span="4" :offset="filterable ?1:15">
|
||||
<view class="demo-uni-col center" @click="confirm" style="color: #576b95;">确 认</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<uni-row>
|
||||
<uni-col :span="8">
|
||||
<view class="">
|
||||
<picker-view @change="bindChange" class="picker-view">
|
||||
<!-- 省 -->
|
||||
<picker-view-column>
|
||||
<view class="center" v-for="(item,index) in provinces" :key="Math.random()">
|
||||
{{item.value}}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
<!-- 市 -->
|
||||
<picker-view-column>
|
||||
<view class="center" v-for="(item,index) in cities" :key="Math.random()">
|
||||
{{item.value}}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
区县
|
||||
<picker-view-column>
|
||||
<view class="center" v-for="(item,index) in counties" :key="Math.random()">
|
||||
{{item.value}}
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import area from './area.js'
|
||||
export default {
|
||||
props: {
|
||||
label: {
|
||||
default: '标签'
|
||||
},
|
||||
filterable: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
treeArr: {
|
||||
default: function() {
|
||||
return area
|
||||
},
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//---
|
||||
selctValue: '',
|
||||
//
|
||||
popupVisible: true,
|
||||
title: 'picker-view',
|
||||
filterpickeArr: [],
|
||||
visible: true,
|
||||
//搜索框---
|
||||
search: '',
|
||||
//滚动框的值
|
||||
pickeValue: '',
|
||||
// 省市县数据
|
||||
provinces: [],
|
||||
cities: [],
|
||||
counties: [],
|
||||
selectProvince: '',
|
||||
selectCity: '',
|
||||
selectCounty: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.filterpickeArr = [...this.treeArr]
|
||||
this.resetArr()
|
||||
},
|
||||
methods: {
|
||||
//恢复 下拉数据/搜索数据/选中数据
|
||||
resetArr() {
|
||||
this.provinces = [...this.treeArr]
|
||||
this.cities = [...this.provinces[0].children]
|
||||
this.counties = [...this.cities[0].children]
|
||||
this.selectProvince = this.provinces[0]
|
||||
this.selectCity = this.cities[0]
|
||||
this.selectCounty = this.counties[0]
|
||||
//搜索项
|
||||
this.search = ''
|
||||
},
|
||||
//表单项
|
||||
open() {
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('bottom')
|
||||
this.resetArr()
|
||||
},
|
||||
//弹出框---
|
||||
// 输入框
|
||||
inputChange(val) {
|
||||
this.filter(val)
|
||||
},
|
||||
//过滤
|
||||
filter(val) {
|
||||
const filteArr = this.treeArr.filter((item, index) => {
|
||||
return item.indexOf(val) !== -1;
|
||||
})
|
||||
this.filterpickeArr = [...filteArr]
|
||||
this.pickeValue = this.filterpickeArr[0]
|
||||
},
|
||||
//取消
|
||||
cancle() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
//确认
|
||||
confirm() {
|
||||
this.selctValue = this.pickeValue
|
||||
this.$refs.popup.close()
|
||||
const selectData = {
|
||||
selectProvince: this.selectProvince,
|
||||
selectCity: this.selectCity,
|
||||
selectCounty: this.selectCounty
|
||||
}
|
||||
let showValue = this.selectProvince.value + '/' + this.selectCity.value + '/' + this.selectCounty.value
|
||||
//回显
|
||||
this.selctValue = showValue
|
||||
this.$emit('confirm', selectData)
|
||||
},
|
||||
// 滑动
|
||||
bindChange: function(e) {
|
||||
const val = e.detail.value
|
||||
//联动-实现
|
||||
this.linkArr(val)
|
||||
},
|
||||
|
||||
//联动实现
|
||||
linkArr(val = []) {
|
||||
let provinceIndex = val[0]
|
||||
let cityIndex = val[1]
|
||||
let countyIndex = val[2]
|
||||
if (provinceIndex || provinceIndex === 0) {
|
||||
//说明第一列 改变了------
|
||||
this.cities = (this.provinces[provinceIndex] || {}).children
|
||||
this.counties = (this.cities[0] || {}).children
|
||||
//默认选中的数据
|
||||
this.selectProvince = this.provinces[provinceIndex]
|
||||
this.selectCity = this.cities[0]
|
||||
this.selectCounty = this.counties[0]
|
||||
}
|
||||
if (cityIndex || cityIndex === 0) {
|
||||
//说明第二列 改变了------
|
||||
this.counties = (this.cities[cityIndex] || {}).children
|
||||
//默认选中的数据
|
||||
this.selectCity = this.cities[cityIndex]
|
||||
this.selectCounty = this.counties[0]
|
||||
}
|
||||
if (countyIndex || countyIndex === 0) {
|
||||
//说明第三列 改变了-----
|
||||
//默认选中的数据
|
||||
this.selectCounty = this.counties[countyIndex]
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-uni-col {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.picker-view {
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user