JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 样式配置宽度不能为负

Browse Source
This commit is contained in:
roymondchen 2025-03-04 14:09:28 +08:00
parent f5315122e4
commit 775fcf5693
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/layouts/props-panel/PropsPanel.vue
View File

@ -171,7 +171,7 @@ const propsPanelWidth = ref(
); );
onMounted(() => { onMounted(() => {
propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${propsPanelWidth.value}px`); propsPanelEl.value?.style.setProperty('--props-style-panel-width', `${Math.max(propsPanelWidth.value, 0)}px`);
}); });
const widthChange = ({ deltaX }: OnDrag) => { const widthChange = ({ deltaX }: OnDrag) => {
@ -187,7 +187,7 @@ const widthChange = ({ deltaX }: OnDrag) => {
if (value > uiService.get('columnWidth').right) { if (value > uiService.get('columnWidth').right) {
value = uiService.get('columnWidth').right - 40; value = uiService.get('columnWidth').right - 40;
} }
propsPanelWidth.value = value; propsPanelWidth.value = Math.max(value, 0);
}; };
watch(propsPanelWidth, (value) => { watch(propsPanelWidth, (value) => {

11
packages/editor/src/layouts/props-panel/use-style-panel.ts
View File

@ -1,4 +1,4 @@
import { computed, type Ref } from 'vue'; import { computed, type Ref, watch } from 'vue';
import { Protocol } from '@editor/services/storage'; import { Protocol } from '@editor/services/storage';
import { Services } from '@editor/type'; import { Services } from '@editor/type';
@ -21,6 +21,15 @@ export const useStylePanel = (
const showStylePanelToggleButton = computed(() => uiService.get('frameworkRect').width >= 1280); const showStylePanelToggleButton = computed(() => uiService.get('frameworkRect').width >= 1280);
watch(
() => uiService.get('frameworkRect').width,
() => {
if (uiService.get('columnWidth').right < propsPanelWidth.value) {
toggleStylePanel(false);
}
},
);
const toggleStylePanel = (showStylePanel: boolean) => { const toggleStylePanel = (showStylePanel: boolean) => {
uiService.set('showStylePanel', showStylePanel); uiService.set('showStylePanel', showStylePanel);
storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN }); storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN });