修复滚动条失效的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> <template>
<div> <q-scroll-area style="height: 60vw; width: 20vw">
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name"> <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
<template v-slot:default-header="prop"> <template v-slot:default-header="prop">
<q-item <q-item
@ -116,7 +116,7 @@
</q-item> </q-item>
</template> </template>
</q-tree> </q-tree>
</div> </q-scroll-area>
<signal-source-group-dialog ref="group_dialog" /> <signal-source-group-dialog ref="group_dialog" />
<signal-source-dialog ref="signal_source_dialog" /> <signal-source-dialog ref="signal_source_dialog" />
</template> </template>

View File

@ -5,7 +5,7 @@
@show="onShow" @show="onShow"
@before-hide="resetData" @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-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm"> <q-card-section class="q-ma-none q-pa-sm">
<div class="row"> <div class="row">
@ -14,6 +14,23 @@
</div> </div>
<q-space /> <q-space />
<div> <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 <q-btn
:loading="loading" :loading="loading"
flat flat
@ -32,7 +49,7 @@
<q-separator /> <q-separator />
<q-card-section style="max-height: 75vh; width: 70vw" class="scroll"> <q-card-section class="scroll">
<q-list> <q-list>
<q-item> <q-item>
<q-item-section> <q-item-section>
@ -112,19 +129,19 @@
<q-select <q-select
:label="$t('speed')" :label="$t('speed')"
v-model="subtitle.x_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-select>
</q-item-section> </q-item-section>
<q-item-section></q-item-section> <q-item-section></q-item-section>
</q-item> </q-item>
<q-separator inset /> <q-separator inset />
<q-item style="height: 45vh"> <q-item ref="editor_parent" style="height: 40vh">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div> <div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div>
</div> </div>
<div class="row" style="height: 45vh"> <div class="row">
<div ref="wysiwyg_editor"></div> <div ref="wysiwyg_editor"></div>
</div> </div>
</div> </div>
@ -170,7 +187,6 @@ main .ck-editor[role='application'] .ck.ck-content,
width: 100%; width: 100%;
background: #fff; background: #fff;
font-size: 1em; font-size: 1em;
line-height: 1.6em;
min-height: var(--ck-sample-editor-min-height); min-height: var(--ck-sample-editor-min-height);
padding: 1.5em 2em; padding: 1.5em 2em;
} }
@ -210,12 +226,14 @@ import {
computed, computed,
onMounted, onMounted,
onBeforeUnmount, onBeforeUnmount,
nextTick,
} from "vue"; } from "vue";
import { useStore } from "src/store"; import { useStore } from "src/store";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData"; import GlobalData from "src/common/GlobalData";
import SubtitleEntity from "src/entities/SubtitleEntity"; import SubtitleEntity from "src/entities/SubtitleEntity";
import { log } from "util";
export default defineComponent({ export default defineComponent({
name: "ComponentSubtitleDialog", name: "ComponentSubtitleDialog",
@ -229,6 +247,7 @@ export default defineComponent({
let subtitle = ref(new SubtitleEntity()); let subtitle = ref(new SubtitleEntity());
let wysiwyg_editor: Ref<HTMLElement | null> = ref(null); let wysiwyg_editor: Ref<HTMLElement | null> = ref(null);
let wysiwyg_toolbar: 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; let editor: any = null;
const createEditor = () => { const createEditor = () => {
@ -237,35 +256,38 @@ export default defineComponent({
return; 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, { (window as any).DecoupledDocumentEditor.create(wysiwyg_editor.value, {
fontSize: { fontSize: {
options: [ options: fontOptions,
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,
],
}, },
toolbar: { toolbar: {
items: [ items: [
@ -284,8 +306,6 @@ export default defineComponent({
"bulletedList", "bulletedList",
"todoList", "todoList",
"|", "|",
"blockQuote",
"|",
"undo", "undo",
"redo", "redo",
], ],
@ -315,6 +335,7 @@ export default defineComponent({
subtitle, subtitle,
wysiwyg_editor, wysiwyg_editor,
wysiwyg_toolbar, wysiwyg_toolbar,
editor_parent,
async showDialog() { async showDialog() {
show_dialog.value = true; show_dialog.value = true;
loading.value = true; loading.value = true;
@ -335,12 +356,18 @@ export default defineComponent({
}, },
onShow() { onShow() {
if (editor) { if (editor) {
setTimeout(() => {
editor.ui.view.toolbar.isCompact = false; editor.ui.view.toolbar.isCompact = false;
editor.ui.view.toolbar.maxWidth = "100%"; editor.ui.view.toolbar.maxWidth = "100%";
}, 500);
document.querySelectorAll(".ck-dropdown__panel").forEach((item) => { document.querySelectorAll(".ck-dropdown__panel").forEach((item) => {
((item as HTMLElement)?.style as any).overflow = "auto"; ((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); editor.setData(subtitle.value.text);
@ -397,6 +424,17 @@ export default defineComponent({
} catch {} } catch {}
loading.value = false; 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": "设置字幕成功", "set subtitle success": "设置字幕成功",
"input data error": "输入数据错误", "input data error": "输入数据错误",
"editor error": "富文本编辑器内部错误", "editor error": "富文本编辑器内部错误",
"Exit Fullscreen": "退出全屏",
"Go Fullscreen": "全屏",
}; };