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

fix iframe style

Browse Source
This commit is contained in:
Timi
2026-08-28 17:45:38 +08:00
parent cbc4d0396f
commit 33f976b1ea
2 changed files with 65 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tiptap-editor/TiptapIframeButton.vue
+64 -27
View File
@@ -1,5 +1,5 @@
<template> <template>
<t-button v-popup="'插入内嵌网页'" :variant="active ? 'base' : 'text'" :theme="active ? 'light' : 'default'" @click="openDialog"> <t-button :variant="active ? 'base' : 'text'" :theme="active ? 'light' : 'default'" @click="openDialog">
<t-icon name="web" /> <t-icon name="web" />
</t-button> </t-button>
<bottom-popup <bottom-popup
@@ -12,22 +12,49 @@
@right-button-click="onConfirm" @right-button-click="onConfirm"
destroy-on-close destroy-on-close
> >
<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="网页地址"> <t-input
<t-input v-model="iframeForm.src" placeholder="请输入网页地址" /> v-model="iframeForm.src"
</t-form-item> placeholder="请输入网页地址"
<t-form-item label="网页标题"> borderless
<t-input v-model="iframeForm.title" placeholder="请输入网页标题，可留空" /> />
</t-form-item> </t-form-item>
<t-form-item label="宽度"> <t-form-item label="网页标题">
<t-input v-model="iframeForm.width" placeholder="请输入宽度，默认 100%" /> <t-input
</t-form-item> v-model="iframeForm.title"
<t-form-item label="高度"> placeholder="请输入网页标题，可留空"
<t-input v-model="iframeForm.height" placeholder="请输入高度，默认 28rem" /> borderless
</t-form-item> />
</t-form> </t-form-item>
</div> <t-form-item label="宽度">
<div class="field">
<t-input
v-model="iframeForm.width"
placeholder="请输入宽度，默认 100%"
borderless
/>
<t-button size="extra-small" variant="outline" @click="setWidth('auto')">
自动
</t-button>
<t-button size="extra-small" variant="outline" @click="setWidth('100%')">
铺满
</t-button>
</div>
</t-form-item>
<t-form-item label="高度">
<div class="field">
<t-input
v-model="iframeForm.height"
placeholder="请输入高度，默认 28rem"
borderless
/>
<t-button size="extra-small" variant="outline" @click="setHeight">
自动
</t-button>
</div>
</t-form-item>
</t-form>
</bottom-popup> </bottom-popup>
</template> </template>
@@ -53,6 +80,14 @@ const iframeForm = reactive({
height: "28rem" height: "28rem"
}); });
function setWidth(width: "auto" | "100%") {
iframeForm.width = width;
}
function setHeight() {
iframeForm.height = "auto";
}
function openDialog() { function openDialog() {
if (!props.editor) { if (!props.editor) {
return; return;
@@ -105,19 +140,21 @@ 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;
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;
} }
} }
} }
</style> </style>
src/components/tiptap-editor/TiptapLinkButton.vue
+1
View File
@@ -101,6 +101,7 @@ function onConfirm() {
<style lang="less" scoped> <style lang="less" scoped>
.link-form { .link-form {
gap: .75rem; gap: .75rem;
padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }