From c3b96ce912bfc13d30c09393dd57cbcbf2d0b80a Mon Sep 17 00:00:00 2001 From: xuqingkai Date: Thu, 16 May 2024 10:37:25 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8DPicker?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E5=A4=9A=E5=88=97=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E7=BB=91=E5=AE=9A=E5=80=BC=E4=B8=BA=E7=A9=BA?= =?UTF-8?q?=E6=95=B0=E7=BB=84=E6=97=B6=E5=B0=86=E5=88=97=E7=AC=AC=E4=B8=80?= =?UTF-8?q?=E9=A1=B9=E4=BD=9C=E4=B8=BA=E6=98=BE=E7=A4=BA=E5=80=BC=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/picker.md | 2 +- src/pages/picker/Index.vue | 2 +- .../components/wd-picker/wd-picker.vue | 61 ++++++++----------- 3 files changed, 29 insertions(+), 36 deletions(-) diff --git a/docs/component/picker.md b/docs/component/picker.md index da727d61..3eadc5a8 100644 --- a/docs/component/picker.md +++ b/docs/component/picker.md @@ -1,6 +1,6 @@ -# Picker 选择器视图 +# Picker 选择器 Picker 组件为 popup 和 pickerView 的组合。 diff --git a/src/pages/picker/Index.vue b/src/pages/picker/Index.vue index d03325d2..a0f76cbe 100644 --- a/src/pages/picker/Index.vue +++ b/src/pages/picker/Index.vue @@ -98,7 +98,7 @@ const columns2 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', ' const columns3 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7']) const value3 = ref('选项4') -const value4 = ref(['中南大学', '软件工程']) +const value4 = ref([]) const columns4 = ref([ ['中山大学', '中南大学', '华南理工大学'], ['计算机科学与技术', '软件工程', '通信工程', '法学', '经济学'] diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue index ff14fa6c..3003efd0 100644 --- a/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue +++ b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue @@ -89,7 +89,7 @@ export default { import { getCurrentInstance, onBeforeMount, ref, watch, computed, onMounted, nextTick } from 'vue' import { deepClone, defaultDisplayFormat, getType, isArray, isDef, isFunction } from '../common/util' import { useCell } from '../composables/useCell' -import { type ColumnItem, formatArray } from '../wd-picker-view/types' +import { type ColumnItem, formatArray, type PickerViewInstance } from '../wd-picker-view/types' import { FORM_KEY, type FormItemRule } from '../wd-form/types' import { useParent } from '../composables/useParent' import { useTranslate } from '../composables/useTranslate' @@ -99,7 +99,7 @@ const { translate } = useTranslate('picker') const props = defineProps(pickerProps) const emit = defineEmits(['confirm', 'open', 'cancel', 'update:modelValue']) -const pickerViewWd = ref(null) +const pickerViewWd = ref(null) const cell = useCell() const innerLoading = ref(false) // 内部控制是否loading @@ -124,12 +124,8 @@ watch( if (fn && !isFunction(fn)) { console.error('The type of displayFormat must be Function') } - if (pickerViewWd.value && pickerViewWd.value.selectedIndex && pickerViewWd.value.selectedIndex.length !== 0) { - if (isDef(props.modelValue) && props.modelValue !== '') { - setShowValue(pickerViewWd.value.getSelects()) - } else { - showValue.value = '' - } + if (pickerViewWd.value && pickerViewWd.value.getSelectedIndex().length !== 0) { + handleShowValueUpdate(props.modelValue) } }, { @@ -143,17 +139,7 @@ watch( (newValue) => { pickerValue.value = newValue // 获取初始选中项,并展示初始选中文案 - if (isDef(newValue) && newValue !== '') { - if (pickerViewWd.value && pickerViewWd.value.getSelects) { - nextTick(() => { - setShowValue(pickerViewWd.value!.getSelects()) - }) - } else { - setShowValue(getSelects(newValue)!) - } - } else { - showValue.value = '' - } + handleShowValueUpdate(newValue) }, { deep: true, @@ -167,17 +153,7 @@ watch( displayColumns.value = newValue resetColumns.value = newValue // 获取初始选中项,并展示初始选中文案 - if (isDef(props.modelValue) && props.modelValue !== '') { - if (pickerViewWd.value && pickerViewWd.value.getSelects) { - nextTick(() => { - setShowValue(pickerViewWd.value!.getSelects()) - }) - } else { - setShowValue(getSelects(props.modelValue)!) - } - } else { - showValue.value = '' - } + handleShowValueUpdate(props.modelValue) }, { deep: true, @@ -226,10 +202,7 @@ const isRequired = computed(() => { const { proxy } = getCurrentInstance() as any onMounted(() => { - isDef(props.modelValue) && props.modelValue !== '' && setShowValue(getSelects(props.modelValue)!) - if (isDef(props.modelValue) && props.modelValue !== '' && pickerViewWd.value && pickerViewWd.value.getSelects) { - setShowValue(pickerViewWd.value!.getSelects()) - } + handleShowValueUpdate(props.modelValue) }) onBeforeMount(() => { @@ -237,6 +210,25 @@ onBeforeMount(() => { resetColumns.value = deepClone(props.columns) }) +/** + * 值变更时更新显示内容 + * @param value + */ +function handleShowValueUpdate(value: string | number | Array) { + // 获取初始选中项,并展示初始选中文案 + if ((isArray(value) && value.length > 0) || (isDef(value) && !isArray(value) && value !== '')) { + if (pickerViewWd.value) { + nextTick(() => { + setShowValue(pickerViewWd.value!.getSelects()) + }) + } else { + setShowValue(getSelects(value)!) + } + } else { + showValue.value = '' + } +} + /** * @description 根据传入的value，picker组件获取当前cell展示值。 * @param {String|Number|Array>}value @@ -344,6 +336,7 @@ function handleConfirm() { popupShow.value = false resetColumns.value = deepClone(columns) emit('update:modelValue', values) + setShowValue(selects) emit('confirm', { value: values,