From 4057d97fbd1c830c8c15abcca00f51720b53e2ce Mon Sep 17 00:00:00 2001 From: chensiAb <chenchenco03@163.com> Date: Fri, 23 Aug 2024 09:57:32 +0800 Subject: [PATCH] fix:父组件不传递方法默认函数写法 --- forms/select/CSelect.vue | 99 ++++++++++++++++++++++++++++++++++--------------- 1 files changed, 68 insertions(+), 31 deletions(-) diff --git a/forms/select/CSelect.vue b/forms/select/CSelect.vue index e8547c6..9c7a349 100644 --- a/forms/select/CSelect.vue +++ b/forms/select/CSelect.vue @@ -4,31 +4,47 @@ */ <template> - <view class="c-select"> - <picker - v-if="!selectByPage" - mode="selector" - :range="options" - :value="current" - range-key="name" - @change="evt=>handleChange(evt.detail)" - > - <AtInput - ref="input" - :name="itemRes.name" - :title="itemRes.label" - :required="itemRes.required" - :disabled="itemRes.disabled" - :error="itemRes.error" - :placeholder="placeholder" - :value="selected" - > - <view class="at-icon at-icon-chevron-right" /> - </AtInput> - </picker> + <view + class="c-select" + :class="readOnly?'read-only':''" + > + <!-- 下拉选择模式 --> <view - v-else-if="selectByPage.length > 5" - @tap="evt => onGoToSelectorPage()" + v-if="!selectByPage" + class="c-select-slot-mode" + > + <picker + class="c-select-input" + mode="selector" + :range="options" + :value="current" + range-key="name" + @change="evt=>handleChange(evt.detail)" + > + <AtInput + ref="input" + :name="itemRes.name" + :title="itemRes.label" + :required="itemRes.required" + :disabled="itemRes.disabled" + :error="itemRes.error" + :placeholder="placeholder" + :value="selected" + > + <view + v-show="!readOnly" + class="at-icon at-icon-chevron-right" + /> + </AtInput> + </picker> + <view class="c-select-slot"> + <slot /> + </view> + </view> + <!-- 跳转页面模式 --> + <view + v-else-if="selectByPage.length > 5 || selectByPage === 'on'" + @tap="evt => onGoSelectorPage()" > <AtInput :name="itemRes.name" @@ -37,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> @@ -63,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 { @@ -101,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