fix(plan): 隐藏 PeriodInput 组件的触发区域
PeriodInput 组件现在支持通过 hideTrigger 属性隐藏触发区域, 使其纯粹作为弹窗组件使用,由 SelectPickerGlobal 的"自定义输入"选项触发。 - 新增 hideTrigger prop,控制是否显示触发区域 - SavingsTemplate 中使用 :hide-trigger="true" 避免显示多余的选择器 - 解决了多阶段模式下出现额外触发区域的问题 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Showing
3 changed files
with
26 additions
and
2 deletions
| 1 | ## 2026-03-04 | 1 | ## 2026-03-04 |
| 2 | +### 16:40:36 - fix(plan): 隐藏 PeriodInput 组件的触发区域 | ||
| 3 | + | ||
| 4 | +**影响文件**: | ||
| 5 | +- `src/components/plan/PlanFields/PeriodInput.vue` | ||
| 6 | + | ||
| 7 | +**变更摘要**: | ||
| 8 | +- 隐藏 PeriodInput 组件的触发区域 | ||
| 9 | + | ||
| 10 | +--- | ||
| 11 | + | ||
| 12 | + | ||
| 2 | 13 | ||
| 3 | ### 16:28:49 - fix(plan): 支持从出生年月日推算年龄判断多阶段提取方案 | 14 | ### 16:28:49 - fix(plan): 支持从出生年月日推算年龄判断多阶段提取方案 |
| 4 | 15 | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <view> | 2 | <view> |
| 3 | <!-- 标签 --> | 3 | <!-- 标签 --> |
| 4 | - <view v-if="label" class="text-sm text-gray-600 mb-2 flex items-center"> | 4 | + <view v-if="label && !hideTrigger" class="text-sm text-gray-600 mb-2 flex items-center"> |
| 5 | <text v-if="required" class="text-red-500 mr-1">*</text> | 5 | <text v-if="required" class="text-red-500 mr-1">*</text> |
| 6 | <text>{{ label }}</text> | 6 | <text>{{ label }}</text> |
| 7 | </view> | 7 | </view> |
| 8 | 8 | ||
| 9 | - <!-- 触发区域 --> | 9 | + <!-- 触发区域(可隐藏) --> |
| 10 | <view | 10 | <view |
| 11 | + v-if="!hideTrigger" | ||
| 11 | class="flex justify-between items-center border border-gray-200 rounded-lg p-3 bg-gray-50" | 12 | class="flex justify-between items-center border border-gray-200 rounded-lg p-3 bg-gray-50" |
| 12 | @tap="openInput" | 13 | @tap="openInput" |
| 13 | > | 14 | > |
| ... | @@ -203,6 +204,17 @@ const props = defineProps({ | ... | @@ -203,6 +204,17 @@ const props = defineProps({ |
| 203 | allowed_formats: ['终身', '一笔过'], | 204 | allowed_formats: ['终身', '一笔过'], |
| 204 | custom_validators: [] | 205 | custom_validators: [] |
| 205 | }) | 206 | }) |
| 207 | + }, | ||
| 208 | + | ||
| 209 | + /** | ||
| 210 | + * 是否隐藏触发区域 | ||
| 211 | + * @description 设置为 true 时,不渲染触发区域,只渲染弹窗 | ||
| 212 | + * 用于由其他组件(如 SelectPickerGlobal 的"自定义输入"选项)触发弹窗的场景 | ||
| 213 | + * @type {boolean} | ||
| 214 | + */ | ||
| 215 | + hideTrigger: { | ||
| 216 | + type: Boolean, | ||
| 217 | + default: false | ||
| 206 | } | 218 | } |
| 207 | }) | 219 | }) |
| 208 | 220 | ... | ... |
| ... | @@ -153,6 +153,7 @@ | ... | @@ -153,6 +153,7 @@ |
| 153 | inputLabel="请输入提取期" | 153 | inputLabel="请输入提取期" |
| 154 | inputPlaceholder="请输入年数" | 154 | inputPlaceholder="请输入年数" |
| 155 | :validation-rules="periodValidationRules" | 155 | :validation-rules="periodValidationRules" |
| 156 | + :hide-trigger="true" | ||
| 156 | @confirm="onPeriodInputConfirm" | 157 | @confirm="onPeriodInputConfirm" |
| 157 | @cancel="onPeriodInputCancel" | 158 | @cancel="onPeriodInputCancel" |
| 158 | /> | 159 | /> | ... | ... |
-
Please register or login to post a comment