修复滚动条失效的BUG

This commit is contained in:
fangxiang 2021-11-05 09:15:51 +08:00
parent f1f1b87dd0
commit 09dd610a1e
3 changed files with 80 additions and 40 deletions

View File

@ -1,5 +1,5 @@
<template>
<div>
<q-scroll-area style="height: 60vw; width: 20vw">
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
<template v-slot:default-header="prop">
<q-item
@ -116,7 +116,7 @@
</q-item>
</template>
</q-tree>
</div>
</q-scroll-area>
<signal-source-group-dialog ref="group_dialog" />
<signal-source-dialog ref="signal_source_dialog" />
</template>

View File

@ -5,7 +5,7 @@
@show="onShow"
@before-hide="resetData"
>
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 70vw">
<q-card class="overflow-hidden" style="max-width: 70vw">
<q-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm">
<div class="row">
@ -14,6 +14,23 @@
</div>
<q-space />
<div>
<q-btn
flat
round
color="secondary"
:icon="
$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'
"
@click="toggleFullScreen"
>
<q-tooltip>
{{
$q.fullscreen.isActive
? $t("Exit Fullscreen")
: $t("Go Fullscreen")
}}
</q-tooltip>
</q-btn>
<q-btn
:loading="loading"
flat
@ -32,7 +49,7 @@
<q-separator />
<q-card-section style="max-height: 75vh; width: 70vw" class="scroll">
<q-card-section class="scroll">
<q-list>
<q-item>
<q-item-section>
@ -112,19 +129,19 @@
<q-select
:label="$t('speed')"
v-model="subtitle.x_speed"
:options="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
:options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 20]"
></q-select>
</q-item-section>
<q-item-section></q-item-section>
</q-item>
<q-separator inset />
<q-item style="height: 45vh">
<q-item ref="editor_parent" style="height: 40vh">
<div class="col">
<div class="row">
<div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div>
</div>
<div class="row" style="height: 45vh">
<div class="row">
<div ref="wysiwyg_editor"></div>
</div>
</div>
@ -170,7 +187,6 @@ main .ck-editor[role='application'] .ck.ck-content,
width: 100%;
background: #fff;
font-size: 1em;
line-height: 1.6em;
min-height: var(--ck-sample-editor-min-height);
padding: 1.5em 2em;
}
@ -210,12 +226,14 @@ import {
computed,
onMounted,
onBeforeUnmount,
nextTick,
} from "vue";
import { useStore } from "src/store";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
import SubtitleEntity from "src/entities/SubtitleEntity";
import { log } from "util";
export default defineComponent({
name: "ComponentSubtitleDialog",
@ -229,6 +247,7 @@ export default defineComponent({
let subtitle = ref(new SubtitleEntity());
let wysiwyg_editor: Ref<HTMLElement | null> = ref(null);
let wysiwyg_toolbar: Ref<HTMLElement | null> = ref(null);
let editor_parent: Ref<HTMLElement | null> = ref(null);
let editor: any = null;
const createEditor = () => {
@ -237,35 +256,38 @@ export default defineComponent({
return;
}
const fontOptions: number[] = [9, 11, 13, 17];
for (let i = 17 + 2; i < 100; i += 2) {
fontOptions.push(i);
}
for (let i = 103; i < 150; i += 3) {
fontOptions.push(i);
}
for (let i = 154; i < 180; i += 4) {
fontOptions.push(i);
}
for (let i = 185; i < 200; i += 5) {
fontOptions.push(i);
}
for (let i = 210; i < 250; i += 10) {
fontOptions.push(i);
}
for (let i = 270; i < 300; i += 20) {
fontOptions.push(i);
}
for (let i = 330; i < 360; i += 30) {
fontOptions.push(i);
}
(window as any).DecoupledDocumentEditor.create(wysiwyg_editor.value, {
fontSize: {
options: [
9,
11,
13,
"default",
17,
19,
21,
25,
29,
31,
35,
39,
41,
45,
49,
51,
55,
59,
61,
69,
71,
79,
89,
99,
109,
],
options: fontOptions,
},
toolbar: {
items: [
@ -284,8 +306,6 @@ export default defineComponent({
"bulletedList",
"todoList",
"|",
"blockQuote",
"|",
"undo",
"redo",
],
@ -315,6 +335,7 @@ export default defineComponent({
subtitle,
wysiwyg_editor,
wysiwyg_toolbar,
editor_parent,
async showDialog() {
show_dialog.value = true;
loading.value = true;
@ -335,12 +356,18 @@ export default defineComponent({
},
onShow() {
if (editor) {
setTimeout(() => {
editor.ui.view.toolbar.isCompact = false;
editor.ui.view.toolbar.maxWidth = "100%";
}, 500);
document.querySelectorAll(".ck-dropdown__panel").forEach((item) => {
((item as HTMLElement)?.style as any).overflow = "auto";
((item as HTMLElement)?.style as any).height = "45vh";
((item as HTMLElement)?.style as any).overflowX = "hidden";
((item as HTMLElement)?.style as any).height = "40vh";
item.querySelectorAll(".ck-button__label").forEach((item_) => {
((item_ as HTMLElement)?.style as any).fontSize = "20px";
});
});
editor.setData(subtitle.value.text);
@ -397,6 +424,17 @@ export default defineComponent({
} catch {}
loading.value = false;
},
toggleFullScreen(e: any) {
console.log(e);
const target = e.target.parentNode.parentNode.parentNode;
console.log(target);
$q.fullscreen
.toggle(target)
.then(() => {})
.catch((err) => {
console.error(err);
});
},
};
},
});

View File

@ -170,4 +170,6 @@ export default {
"set subtitle success": "设置字幕成功",
"input data error": "输入数据错误",
"editor error": "富文本编辑器内部错误",
"Exit Fullscreen": "退出全屏",
"Go Fullscreen": "全屏",
};