修复滚动条失效的BUG
This commit is contained in:
fangxiang
parent
f1f1b87dd0
commit
09dd610a1e
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
editor.ui.view.toolbar.isCompact = false;
|
||||
editor.ui.view.toolbar.maxWidth = "100%";
|
||||
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);
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -170,4 +170,6 @@ export default {
|
|||
"set subtitle success": "设置字幕成功",
|
||||
"input data error": "输入数据错误",
|
||||
"editor error": "富文本编辑器内部错误",
|
||||
"Exit Fullscreen": "退出全屏",
|
||||
"Go Fullscreen": "全屏",
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue