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
<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> |