修复滚动条失效的BUG
This commit is contained in:
parent
f1f1b87dd0
commit
09dd610a1e
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -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": "全屏",
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue