77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
|
<view>
|
|
<click-input preIcon="map-pin-ellipse" :disabled="readonly" :placeholder="formProps.placeholder || '请选择省市区'"
|
|
@click="chooseLocation" :value="props.modelValue">
|
|
</click-input>
|
|
<cc-selectDity :province="area.province" :city="area.city" :area="area.area" :show="show"
|
|
@sureSelectArea="selectOk" @hideShow="show = false" @changeClick="change"></cc-selectDity>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, reactive } from 'vue'
|
|
import ClickInput from '@/components/ClickInput.vue'
|
|
|
|
const props = defineProps({
|
|
formProps: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
modelValue: String,
|
|
readonly: Boolean
|
|
})
|
|
|
|
// const province = ref('广东省')
|
|
// const city = ref('广州市')
|
|
// const area = ref('天河区')
|
|
|
|
const area = reactive({
|
|
province: '江西省',
|
|
city: '南昌市',
|
|
area: '南昌县'
|
|
})
|
|
|
|
const _value = computed({
|
|
get() {
|
|
if ((props.modelValue || '').trim() === '') {
|
|
return null
|
|
} else {
|
|
const v = props.modelValue.split('-')
|
|
area.province = v[0]
|
|
area.city = v[1]
|
|
area.area = v[2]
|
|
return v
|
|
}
|
|
},
|
|
set(val) {
|
|
emits('update:modelValue', val)
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['update:modelValue'])
|
|
|
|
const show = ref(false)
|
|
|
|
function chooseLocation() {
|
|
if (!props.readonly) {
|
|
show.value = true
|
|
}
|
|
}
|
|
|
|
function selectOk(e) {
|
|
const data = e.detail.target.dataset
|
|
_value.value = `${data.province}-${data.city}-${data.area}`
|
|
show.value = false
|
|
}
|
|
|
|
function change(p, c, a) {
|
|
area.province = p
|
|
area.city = c
|
|
area.area = a
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
</style> |