From 5b15175432d0d03d6a35c4555b26d38720095c3a Mon Sep 17 00:00:00 2001 From: Tevin <tingquanren@163.com> Date: Thu, 16 May 2024 17:39:29 +0800 Subject: [PATCH] 列表页筛选组件,修复下拉选择取消项和值为0的项,显示异常的问题 --- forms/select/CSelect.vue | 49 ++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 38 insertions(+), 11 deletions(-) diff --git a/forms/select/CSelect.vue b/forms/select/CSelect.vue index 9270195..9c7a349 100644 --- a/forms/select/CSelect.vue +++ b/forms/select/CSelect.vue @@ -4,7 +4,10 @@ */ <template> - <view class="c-select"> + <view + class="c-select" + :class="readOnly?'read-only':''" + > <!-- 下拉选择模式 --> <view v-if="!selectByPage" @@ -28,7 +31,10 @@ :placeholder="placeholder" :value="selected" > - <view class="at-icon at-icon-chevron-right" /> + <view + v-show="!readOnly" + class="at-icon at-icon-chevron-right" + /> </AtInput> </picker> <view class="c-select-slot"> @@ -37,8 +43,8 @@ </view> <!-- 跳转页面模式 --> <view - v-else-if="selectByPage.length > 5" - @tap="evt => onGoToSelectorPage()" + v-else-if="selectByPage.length > 5 || selectByPage === 'on'" + @tap="evt => onGoSelectorPage()" > <AtInput :name="itemRes.name" @@ -47,9 +53,12 @@ :disabled="itemRes.disabled" :error="itemRes.error" :placeholder="placeholder" - :value="choose.name" + :value="choose.name || selected" > - <view class="at-icon at-icon-chevron-right" /> + <view + v-show="!readOnly" + class="at-icon at-icon-chevron-right" + /> </AtInput> </view> </view> @@ -73,10 +82,18 @@ options: Array, // 占位提示 placeholder: String, - // 开启选择菜单跳转选择页面模式,并指定功能页面 + // 只读模式 + readOnly: { + type: Boolean, + default: false, + }, + // 开启选择菜单跳转选择页面模式,并指定功能页面,url or 'on' + // url 模式已经废弃,即将删除代码,请勿再使用 selectByPage: String, - // 页面模式下,选择完成后的回调 + // 页面跳转URL模式下,选择完成后的回调 onSelectFromPage: Function, + // 页面跳转on模式下,发起选择的回调 + onOpenSelectorPage: Function, }, data() { return { @@ -111,10 +128,20 @@ }, methods: { handleChange(evt) { - const item = this.options[evt.value]; - this.itemRes.onChange(item[this.optionKey]); + if (typeof this.optionKey === 'undefined') { + this.itemRes.onChange(); + } else { + const item = this.options[evt.value]; + this.itemRes.onChange(item[this.optionKey]); + } }, - onGoToSelectorPage() { + onGoSelectorPage() { + if (this.selectByPage === 'on') { + this.onOpenSelectorPage && this.onOpenSelectorPage(); + return; + } + // 页面跳转URL模式,已废弃,即将删除代码 + console.warn('CSelect:警告,url跳转已废弃,即将删除代码,请勿使用!'); let url = this.selectByPage; if (this.selectByPage.indexOf('?') > 0) { url += '&mode=CSelect'; -- Gitblit v1.9.1