- DynamicForm 上传字段:label 内 view-ui-plus <Button> 渲染原生 <button>, 按 HTML 规范 label 激活行为对交互式后代不生效,文件选择框永不弹出 (IAB 夹具实测旧写法 input 收 0 次点击)。改非交互 <span class="dyn-file-btn-inner"> 恢复 label→input 原生转发。 - Hall.vue 事项卡片补封面缩略图:接口早已下发 coverImage 但用户面从未渲染, 后端出参已绝对化直接 :src,@error 隐藏防裂图。
This commit is contained in:
@@ -303,6 +303,7 @@ watch(
|
|||||||
"
|
"
|
||||||
>移除</a>
|
>移除</a>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- label 的点击转发对交互式后代(原生 <button>)不生效,内层必须是非交互元素,否则点上传无反应 -->
|
||||||
<label class="dyn-file-btn">
|
<label class="dyn-file-btn">
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
@@ -310,9 +311,10 @@ watch(
|
|||||||
:accept="field.accept || (field.type === 'image' ? '.jpg,.jpeg,.png,.gif' : '')"
|
:accept="field.accept || (field.type === 'image' ? '.jpg,.jpeg,.png,.gif' : '')"
|
||||||
@change="uploadFile(field, $event)"
|
@change="uploadFile(field, $event)"
|
||||||
/>
|
/>
|
||||||
<Button size="small" icon="ios-cloud-upload-outline">
|
<span class="dyn-file-btn-inner">
|
||||||
|
<Icon type="ios-cloud-upload-outline" />
|
||||||
{{ field.type === 'image' ? '上传图片' : '上传附件' }}
|
{{ field.type === 'image' ? '上传图片' : '上传附件' }}
|
||||||
</Button>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -377,4 +379,28 @@ watch(
|
|||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
.dyn-file-btn {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.dyn-file-btn-inner {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 0 7px;
|
||||||
|
border: 1px solid #dcdee2;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #fff;
|
||||||
|
color: #515a6e;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 26px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: color 0.2s, border-color 0.2s;
|
||||||
|
}
|
||||||
|
.dyn-file-btn:hover .dyn-file-btn-inner {
|
||||||
|
color: #2d8cf0;
|
||||||
|
border-color: #2d8cf0;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -95,6 +95,11 @@ function apply(item: HallItem) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 封面地址不可达时隐藏占位,避免裂图图标 */
|
||||||
|
function hideCover(e: Event) {
|
||||||
|
(e.target as HTMLImageElement).style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
siteCode.value = resolveSite(route.query.siteCode);
|
siteCode.value = resolveSite(route.query.siteCode);
|
||||||
await loadFilters();
|
await loadFilters();
|
||||||
@@ -139,6 +144,13 @@ onMounted(async () => {
|
|||||||
|
|
||||||
<div class="sh-hall-grid" v-if="list.length">
|
<div class="sh-hall-grid" v-if="list.length">
|
||||||
<div class="item-card" v-for="item in list" :key="item.id">
|
<div class="item-card" v-for="item in list" :key="item.id">
|
||||||
|
<img
|
||||||
|
v-if="item.coverImage"
|
||||||
|
:src="item.coverImage"
|
||||||
|
class="item-cover"
|
||||||
|
alt=""
|
||||||
|
@error="hideCover"
|
||||||
|
/>
|
||||||
<div class="item-title">{{ item.title }}</div>
|
<div class="item-title">{{ item.title }}</div>
|
||||||
<div class="item-summary sh-muted">{{ item.summary || "暂无事项说明" }}</div>
|
<div class="item-summary sh-muted">{{ item.summary || "暂无事项说明" }}</div>
|
||||||
<div class="item-meta">
|
<div class="item-meta">
|
||||||
@@ -233,6 +245,13 @@ onMounted(async () => {
|
|||||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
.item-cover {
|
||||||
|
width: 100%;
|
||||||
|
height: 96px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: calc(var(--sh-radius) - 4px);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
.item-title {
|
.item-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
Reference in New Issue
Block a user