You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
2.8 KiB
142 lines
2.8 KiB
3 months ago
|
<template>
|
||
|
|
<view class="country-box">
|
||
|
|
<betone-new-input
|
||
|
|
:label="label"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
type="select"
|
||
|
|
@arrow="selectFun"
|
||
|
|
v-model="areaName"
|
||
|
|
alt="请选择"
|
||
|
|
:isRequire="isRequire"
|
||
|
|
/>
|
||
|
|
<u-picker
|
||
|
|
:mode="mode"
|
||
|
|
v-model="showCountryModal"
|
||
|
|
:range="pickerData"
|
||
|
|
:range-key="keyName"
|
||
|
|
:mask-close-able="false"
|
||
|
|
@columnchange="changeHandler"
|
||
|
|
@confirm="countryClick"
|
||
|
|
ref="uPicker"
|
||
|
|
></u-picker>
|
||
|
|
<!-- <u-picker
|
||
|
|
:show="showCountryModal"
|
||
|
|
ref="uPicker"
|
||
|
|
:columns="classifyArr"
|
||
|
|
keyName="label"
|
||
|
|
@change="changeHandler"
|
||
|
|
@confirm="countryClick"
|
||
|
|
@cancel="cancelClick"
|
||
|
|
></u-picker> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "spinputcountry",
|
||
|
|
model: {
|
||
|
|
prop: "value",
|
||
|
|
event: "changeCountry",
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
isRequire: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: "",
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
|
||
|
|
pickerData: {
|
||
|
|
type: Array,
|
||
|
|
default: [],
|
||
|
|
},
|
||
|
|
keyName: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
mode: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
placeholder:{
|
||
|
|
type: String,
|
||
|
|
default: "请选择",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value(name) {
|
||
|
|
this.areaName = name;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
areaName: "", //输入框展示数据
|
||
|
|
countryList: [],
|
||
|
|
showCountryModal: false,
|
||
|
|
activeCode: "",
|
||
|
|
childArr: [], // 二级分类数据源
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
// 获取数据源并分出一级二级分类
|
||
|
|
// this.getAllClassify();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeHandler(e) {
|
||
|
|
const {
|
||
|
|
column,
|
||
|
|
index,
|
||
|
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
|
|
picker = this.$refs.uPicker,
|
||
|
|
} = e;
|
||
|
|
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||
|
|
if (column === 0) {
|
||
|
|
// picker为选择器this实例，变化第二列对应的选项
|
||
|
|
this.pickerData[1] = this.pickerData[0][index].children;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
selectFun() {
|
||
|
|
this.showCountryModal = true;
|
||
|
|
},
|
||
|
|
countryClick(country) {
|
||
|
|
this.showCountryModal = false;
|
||
|
|
this.$emit("changeSelect", country);
|
||
|
|
},
|
||
|
|
cancelClick() {
|
||
|
|
this.showCountryModal = false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.modal-content {
|
||
|
|
padding: 40rpx 50rpx;
|
||
|
|
background: #f2f2f7;
|
||
|
|
.modal-title {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-family: PingFangHK-Medium, PingFangHK;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #000000;
|
||
|
|
line-height: 44rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.country-box::v-deep {
|
||
|
|
width: 100%;
|
||
|
|
.alt {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|