timi/timi-tdesign-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix media popup style

Browse Source
This commit is contained in:
Timi
2026-08-28 17:38:29 +08:00
parent 0daf36ea24
commit cbc4d0396f
1 changed files with 89 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tiptap-editor/TiptapMediaButton.vue
+89 -28
View File
@@ -20,29 +20,70 @@
:loading="uploading" :loading="uploading"
:disabled="uploading" :disabled="uploading"
@click="onClick" @click="onClick"
> content="插入"
插入 />
</t-button>
</template> </template>
<div class="form-popup"> <t-form class="popup" label-align="left" label-width="auto">
<t-form class="form-content" label-align="left" label-width="auto"> <t-form-item label="文件">
<t-form-item label="文件"> <div class="field">
<t-button size="small" variant="outline" @click="pickFile"> <t-input
:value="selectedFile?.name || `未选择${typeLabel}文件`"
readonly
borderless
/>
<t-button
size="extra-small"
variant="outline"
@click="pickFile"
>
<span v-text="selectedFile ? '重新选择' : `选择${typeLabel}`" /> <span v-text="selectedFile ? '重新选择' : `选择${typeLabel}`" />
</t-button> </t-button>
<span class="word-space gray" v-text="selectedFile?.name || `未选择${typeLabel}文件`" /> </div>
</t-form-item> </t-form-item>
<t-form-item label="标题"> <t-form-item label="标题">
<t-input v-model="mediaForm.title" :placeholder="`请输入${typeLabel}标题，可留空`" /> <t-input
</t-form-item> v-model="mediaForm.title"
<t-form-item label="宽度"> :placeholder="`请输入${typeLabel}标题，可留空`"
<t-input v-model="mediaForm.width" placeholder="请输入宽度，默认 100%" /> borderless
</t-form-item> />
<t-form-item label="高度"> </t-form-item>
<t-input v-model="mediaForm.height" placeholder="请输入高度，默认 auto" /> <t-form-item label="宽度">
</t-form-item> <div class="field">
</t-form> <t-input
</div> v-model="mediaForm.width"
placeholder="请输入宽度，默认 100%"
borderless
/>
<t-button
size="extra-small"
variant="outline"
@click="setWidth('auto')"
content="自动"
/>
<t-button
size="extra-small"
variant="outline"
@click="setWidth('100%')"
content="铺满"
/>
</div>
</t-form-item>
<t-form-item label="高度">
<div class="field">
<t-input
v-model="mediaForm.height"
placeholder="请输入高度，默认 auto"
borderless
/>
<t-button
size="extra-small"
variant="outline"
@click="setHeight"
content="自动"
/>
</div>
</t-form-item>
</t-form>
</bottom-popup> </bottom-popup>
<input ref="fileInputRef" class="file-input" type="file" :accept="accept" @change="onFileChange" /> <input ref="fileInputRef" class="file-input" type="file" :accept="accept" @change="onFileChange" />
</template> </template>
@@ -89,6 +130,14 @@ function buildDefaultHeight() {
return "auto"; return "auto";
} }
function setWidth(width: "auto" | "100%") {
mediaForm.width = width;
}
function setHeight() {
mediaForm.height = buildDefaultHeight();
}
function pickFile(event?: MouseEvent) { function pickFile(event?: MouseEvent) {
event?.stopPropagation(); event?.stopPropagation();
fileInputRef.value?.click(); fileInputRef.value?.click();
@@ -180,20 +229,32 @@ async function onConfirm() {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.form-popup { .popup {
width: 100%; margin: 0;
max-height: 85vh; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
background: var(--td-bg-color-container); background: var(--td-bg-color-container);
.form-content { .field {
:deep(.t-form__item) { gap: .5rem;
margin-bottom: .875rem; width: 100%;
display: flex;
align-items: center;
:deep(.t-input) {
min-width: 0;
flex: 1;
} }
} }
.selector {
--td-button-extra-small-height: 24px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
} }
.file-input { .file-input {