与 hall 仓 4243a5f 同款:label 的点击转发对交互式后代(原生 <button>) 不生效,文件选择框永不弹出;改 <span class="dyn-file-btn-inner"> 恢复 label→input 原生转发,样式对齐 iview small button。
This commit is contained in:
@@ -186,6 +186,7 @@ async function uploadFile(field: Field, ev: Event) {
|
||||
"
|
||||
>移除</a>
|
||||
</div>
|
||||
<!-- label 的点击转发对交互式后代(原生 <button>)不生效,内层必须是非交互元素,否则点上传无反应 -->
|
||||
<label class="dyn-file-btn">
|
||||
<input
|
||||
type="file"
|
||||
@@ -193,9 +194,10 @@ async function uploadFile(field: Field, ev: Event) {
|
||||
:accept="field.accept || (field.type === 'image' ? '.jpg,.jpeg,.png,.gif' : '')"
|
||||
@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' ? '上传图片' : '上传附件' }}
|
||||
</Button>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
@@ -252,4 +254,28 @@ async function uploadFile(field: Field, ev: Event) {
|
||||
margin-right: 8px;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user