59 lines
2.3 KiB
Vue
59 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<common-cell :name="name" :required="required">
|
||
|
|
<view class="select-other">
|
||
|
|
<picker mode="selector" :range="range" :disabled="disableChange" @change="changeSelect">
|
||
|
|
<view class="select-other__picker" :class="selectedValue ? '' : 'form__placeholder'">{{ selectedValue || '请选择' }}</view>
|
||
|
|
</picker>
|
||
|
|
<input v-if="showOther" class="select-other__input" :disabled="disableChange" :value="otherValue" placeholder="请填写其他原因" @input="changeOther" />
|
||
|
|
</view>
|
||
|
|
</common-cell>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed, ref, watch } from 'vue';
|
||
|
|
import commonCell from '../common-cell.vue';
|
||
|
|
|
||
|
|
const emits = defineEmits(['change']);
|
||
|
|
const props = defineProps({
|
||
|
|
form: { type: Object, default: () => ({}) },
|
||
|
|
name: { default: '' },
|
||
|
|
title: { default: '' },
|
||
|
|
range: { type: Array, default: () => [] },
|
||
|
|
otherFiled: { default: '' },
|
||
|
|
otherField: { default: '' },
|
||
|
|
required: { type: Boolean, default: false },
|
||
|
|
disableChange: { type: Boolean, default: false },
|
||
|
|
});
|
||
|
|
|
||
|
|
const value = computed(() => props.form?.[props.title] || '');
|
||
|
|
const otherOption = computed(() => props.otherFiled || props.otherField || props.range.find((item) => /^(其它|其他)$/.test(item)) || '其它');
|
||
|
|
const isPreset = computed(() => props.range.includes(value.value));
|
||
|
|
const selectingOther = ref(false);
|
||
|
|
const showOther = computed(() => selectingOther.value || (Boolean(value.value) && !isPreset.value));
|
||
|
|
const selectedValue = computed(() => showOther.value ? otherOption.value : value.value);
|
||
|
|
const otherValue = computed(() => showOther.value ? value.value : '');
|
||
|
|
|
||
|
|
watch(value, (nextValue) => {
|
||
|
|
if (nextValue && props.range.includes(nextValue)) selectingOther.value = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
function changeSelect(event) {
|
||
|
|
const selected = props.range[event.detail.value];
|
||
|
|
if (selected === otherOption.value) {
|
||
|
|
selectingOther.value = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
selectingOther.value = false;
|
||
|
|
emits('change', { title: props.title, value: selected });
|
||
|
|
}
|
||
|
|
function changeOther(event) { emits('change', { title: props.title, value: event.detail.value }); }
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@import '../cell-style.css';
|
||
|
|
|
||
|
|
.select-other { width: 100%; }
|
||
|
|
.select-other__picker, .select-other__input { box-sizing: border-box; width: 100%; padding: 12rpx 16rpx; border: 1rpx solid #dcdfe6; border-radius: 8rpx; font-size: 28rpx; }
|
||
|
|
.select-other__input { margin-top: 14rpx; }
|
||
|
|
</style>
|