fix(p88-fill): 填报页文本类字段把 InputEvent 存进值 + 壳内卡片收缩成窄条
build / build (push) Successful in 1m47s

- [object InputEvent]:text/textarea/phone 三个控件在 view-ui-plus Input 上
  监听 @input——该组件 emits 表里没有 input(源码取证:on-*/update:modelValue),
  监听器穿透到根元素收原生 InputEvent,事件对象被当作字段值写入答卷,
  提交即被后端值类型校验拒(「字段「单行文本」必须是字符串」)。
  值通道改 @update:model-value;其余六类控件走 @on-change 取值本就正确未动。
- 窄卡:base.layout.css 把 .yh-fill 定为纵向 flex 卡片模型,flex 子项水平
  margin:auto 放弃 stretch 收缩到内容宽(~300px)。Fill 卡片改 width:100% +
  max-width:800px + align-self:center,底色/边框/外距交还平台卡片规则;
  同叶删掉 min-height:100vh(壳内双滚动来源),嵌入态 fill-plain 不受影响。
- 验证:view-ui-plus 源码 emits 表逐控件核对;vue-tsc + vite build 双绿。
This commit is contained in:
chenxing
2026-10-15 21:24:47 +08:00
parent f630c3aa0f
commit 82a9801ac6
4 changed files with 13 additions and 12 deletions
+2 -1
View File
@@ -24,6 +24,7 @@ function onInput(val: string) {
</script> </script>
<template> <template>
<!-- 值通道=update:modelValue(@input 在 view-ui-plus Input 上穿透成原生事件,P88) -->
<Input :model-value="displayValue" :maxlength="field.maxLength || 11" <Input :model-value="displayValue" :maxlength="field.maxLength || 11"
:placeholder="field.placeholder || '请输入手机号'" :disabled="readonly" @input="onInput" /> :placeholder="field.placeholder || '请输入手机号'" :disabled="readonly" @update:model-value="onInput" />
</template> </template>
+3 -1
View File
@@ -24,6 +24,8 @@ function onInput(val: string) {
</script> </script>
<template> <template>
<!-- 值通道=update:modelValue(view-ui-plus Input 的 emits 表里没有 input,
@input 会穿透成原生监听器把 InputEvent 当值存进答卷,P88) -->
<Input :model-value="displayValue" :placeholder="field.placeholder || '请输入'" :disabled="readonly" <Input :model-value="displayValue" :placeholder="field.placeholder || '请输入'" :disabled="readonly"
@input="onInput" /> @update:model-value="onInput" />
</template> </template>
+2 -1
View File
@@ -24,6 +24,7 @@ function onInput(val: string) {
</script> </script>
<template> <template>
<!-- 值通道=update:modelValue(@input 在 view-ui-plus Input 上穿透成原生事件,P88) -->
<Input type="textarea" :model-value="displayValue" :rows="field.rows || 3" :maxlength="field.maxLength" <Input type="textarea" :model-value="displayValue" :rows="field.rows || 3" :maxlength="field.maxLength"
:placeholder="field.placeholder || '请输入'" :disabled="readonly" @input="onInput" /> :placeholder="field.placeholder || '请输入'" :disabled="readonly" @update:model-value="onInput" />
</template> </template>
+6 -9
View File
@@ -399,17 +399,14 @@ const readonlyReason = computed(() => {
padding: 16px; padding: 16px;
} }
.page-wrapper.yh-fill { /* 壳内渲染吃平台的卡片模型(base.layout.css:.yh-fill=纵向 flex、.main-container=卡片
min-height: 100vh; 自带底色/边框/16px 外距),这里只做定宽居中。P88 窄卡根因:flex 子项水平 margin:auto
background: #f5f7f9; 会放弃 stretch、收缩到内容宽(~300px),所以用 width:100% + align-self:center 定宽,
} 外距与底色留给平台,嵌入态(fill-plain)不受影响。 */
.main-container { .main-container {
width: 100%;
max-width: 800px; max-width: 800px;
margin: 0 auto; align-self: center;
padding: 24px;
background: white;
border-radius: 4px;
} }
.loading-state, .loading-state,