100 lines
1.8 KiB
Vue
100 lines
1.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="field-body" @click="handleSelect()">
|
|
<view class="field-value oneline-hide">
|
|
{{ selected || placeholder }}
|
|
<u-icon name="arrow-down" size="16" color="#999" class="arrow" />
|
|
</view>
|
|
</view>
|
|
<u-select
|
|
v-model="show"
|
|
:list="selectList"
|
|
mode="single-column"
|
|
:default-value="[defaultIndex]"
|
|
@confirm="onConfirm"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SelectProvince',
|
|
props: {
|
|
// v-model 绑定的值
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 占位符
|
|
placeholder: {
|
|
type: String,
|
|
default: '省份'
|
|
},
|
|
// 自定义省份数组
|
|
provinces: {
|
|
type: Array,
|
|
default: () => ['广东省', '广西壮族自治区', '贵州省', '福建省']
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
selected: '',
|
|
defaultIndex: 0
|
|
}
|
|
},
|
|
computed: {
|
|
selectList() {
|
|
return this.provinces.map(p => ({ label: p, value: p }))
|
|
}
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
this.setDefault(val)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.setDefault(this.value)
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.show = true
|
|
},
|
|
handleSelect() {
|
|
this.show = true
|
|
},
|
|
setDefault(val) {
|
|
const index = this.provinces.indexOf(val)
|
|
this.defaultIndex = index >= 0 ? index : 0
|
|
this.selected = val || ''
|
|
},
|
|
onConfirm([item]) {
|
|
this.selected = item.label
|
|
this.$emit('input', item.label)
|
|
this.$emit('change', item.label)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
.field-body {
|
|
|
|
}
|
|
.field-value {
|
|
font-size: 28rpx;
|
|
}
|
|
.oneline-hide {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.arrow{
|
|
font-size: 12px;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|