JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 支持控制pagebar中新增按钮显隐

Browse Source
This commit is contained in:
roymondchen 2022-09-06 16:26:00 +08:00 committed by jia000
parent bdd544e87e
commit 3e024d21ed
4 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/src/layouts/workspace/PageBar.vue
View File

@ -38,7 +38,7 @@
</div> </div>
<template #reference> <template #reference>
<el-icon class="m-editor-page-bar-menu-icon"> <el-icon class="m-editor-page-bar-menu-icon">
<caret-bottom></caret-bottom> <CaretBottom></CaretBottom>
</el-icon> </el-icon>
</template> </template>
</el-popover> </el-popover>

16
packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
View File

@ -1,8 +1,14 @@
<template> <template>
<div class="m-editor-page-bar" ref="pageBar"> <div class="m-editor-page-bar" ref="pageBar">
<div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage"> <div
v-if="showAddPageButton"
id="m-editor-page-bar-add-icon"
class="m-editor-page-bar-item m-editor-page-bar-item-icon"
@click="addPage"
>
<el-icon><plus></plus></el-icon> <el-icon><plus></plus></el-icon>
</div> </div>
<div v-else style="width: 21px"></div>
<div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')"> <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
<el-icon><arrow-left-bold></arrow-left-bold></el-icon> <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
</div> </div>
@ -26,13 +32,17 @@ import { generatePageNameByApp } from '../../utils/editor';
const services = inject<Services>('services'); const services = inject<Services>('services');
const editorService = services?.editorService; const editorService = services?.editorService;
const uiService = services?.uiService;
const pageBar = ref<HTMLDivElement>(); const pageBar = ref<HTMLDivElement>();
const itemsContainer = ref<HTMLDivElement>(); const itemsContainer = ref<HTMLDivElement>();
const pageBarWidth = ref(0); const pageBarWidth = ref(0);
const canScroll = ref(false); const canScroll = ref(false);
const itemsContainerWidth = computed(() => pageBarWidth.value - 105); const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
// 减去新增、左移、右移三个按钮的宽度
const itemsContainerWidth = computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
let translateLeft = 0; let translateLeft = 0;
const resizeObserver = new ResizeObserver((entries) => { const resizeObserver = new ResizeObserver((entries) => {
@ -46,7 +56,7 @@ const resizeObserver = new ResizeObserver((entries) => {
const setCanScroll = () => { const setCanScroll = () => {
if (itemsContainer.value) { if (itemsContainer.value) {
canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105; canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
} }
}; };

1
packages/editor/src/services/ui.ts
View File

@ -54,6 +54,7 @@ const state = reactive<UiState>({
showGuides: true, showGuides: true,
showRule: true, showRule: true,
propsPanelSize: 'small', propsPanelSize: 'small',
showAddPageButton: true,
}); });
class Ui extends BaseService { class Ui extends BaseService {

2
packages/editor/src/type.ts
View File

@ -124,6 +124,8 @@ export interface UiState {
showRule: boolean; showRule: boolean;
/** 用于控制该属性配置表单内组件的尺寸 */ /** 用于控制该属性配置表单内组件的尺寸 */
propsPanelSize: 'large' | 'default' | 'small'; propsPanelSize: 'large' | 'default' | 'small';
/** 是否显示新增页面按钮 */
showAddPageButton: boolean;
} }
export interface EditorNodeInfo { export interface EditorNodeInfo {