自定义组内边距修改
于肖磊
parent
bff29037fe
commit
67b5ad1fd3
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="w h re custom-other">
|
||||
<div v-for="(item, index) in list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
|
||||
<div v-for="(item, index) in list" :key="item.id" class="main-content flex-row" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :is-custom="isCustom" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="w h" :style="style_container">
|
||||
<div class="flex-1" :style="style_container">
|
||||
<div :style="style_img_container">
|
||||
<div :style="style_content_container">
|
||||
<div class="w h re" :style="style_content_img_container">
|
||||
|
|
@ -115,9 +115,9 @@ watchEffect(() => {
|
|||
// 数据左右间距
|
||||
const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right;
|
||||
// 根据容器宽度来计算内部大小
|
||||
const width = old_width - outer_spacing - internal_spacing - content_spacing;
|
||||
const new_width = old_width - outer_spacing - internal_spacing - content_spacing;
|
||||
// 获得对应宽度的比例
|
||||
custom_scale.value = width / old_width;
|
||||
custom_scale.value = new_width / old_width;
|
||||
});
|
||||
//#endregion
|
||||
// 计算纵向显示的宽度
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
<DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#ddd" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
|
||||
<!-- @mouseover="on_choose(index)" -->
|
||||
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': (diy_data.length - 1) - index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
|
||||
<div :class="['main-content', { 'plug-in-border': item.show_tabs == '1' }]">
|
||||
<div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :is-custom="isCustom" :title-params="showData?.data_name || 'name'" :options="options"></model-text>
|
||||
</template>
|
||||
|
|
@ -111,10 +111,10 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { cloneDeep, isEmpty, property } from 'lodash';
|
||||
import { get_math, adjustPosition } from '@/utils';
|
||||
import { get_math, adjustPosition, getPlatform } from '@/utils';
|
||||
import { defaultComData, isRectangleIntersecting } from "./index-default";
|
||||
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
|
||||
import { commonStore } from '@/store';
|
||||
import { commonStore, DataSourceStore } from '@/store';
|
||||
const common_store = commonStore();
|
||||
// 删除
|
||||
const app = getCurrentInstance();
|
||||
|
|
@ -431,7 +431,7 @@ watch(() => center_height.value, () => {
|
|||
staging_y: item.location.staging_y,
|
||||
},
|
||||
com_data: {
|
||||
// 规整历史数据，避免有新增字段丢失
|
||||
// 规整历史数据，避免有新增字段不存在导致报错
|
||||
...Object.assign({}, cloneDeep((defaultComData as any)[`${item.key}_com_data`]), item.com_data),
|
||||
com_height: item.com_data.staging_height,
|
||||
data_source_field: {
|
||||
|
|
@ -799,7 +799,35 @@ const rect_style = computed(() => {
|
|||
};
|
||||
});
|
||||
//#endregion
|
||||
//#region 绑定上下左右事件
|
||||
//#region 绑定上下左右事件和回退按钮
|
||||
// 获取电脑是什么牌子 window 还是mac
|
||||
const platform = getPlatform();
|
||||
// 缓存内容，用于回退
|
||||
const data_source_store = DataSourceStore();
|
||||
const pressedKeys = new Set(); // 使用 Set 记录按下的按键
|
||||
const handle_keydown = (e: KeyboardEvent) => {
|
||||
// 排除默认事件
|
||||
const default_list = ['textarea', 'input'];
|
||||
// 判断是否是用户手动输入框之内操作的
|
||||
if (e.target instanceof HTMLElement && default_list.includes(e.target?.localName)) {
|
||||
return;
|
||||
}
|
||||
// 使用 key 或 code 属性代替 keyCode
|
||||
const key = e.key.toLowerCase(); // 将按键转换为小写，确保一致性
|
||||
// 添加按键到 Set 中
|
||||
pressedKeys.add(key);
|
||||
// 检查 A 和 B 键是否同时按下
|
||||
if ((pressedKeys.has('control') && pressedKeys.has('z') && platform == 'Windows') || (pressedKeys.has('meta') && pressedKeys.has('z') && platform == 'Mac')) {
|
||||
// 监听开启的是全局监听，为了避免全局监听的同时也监听了子组件的回退事件，所以需要判断当前是全局监听还是子组件监听
|
||||
if (!data_source_store.is_children_custom && props.configType == 'custom') {
|
||||
console.log('同时按下了A和B键', props.configType); // 执行相应的操作
|
||||
} else if (data_source_store.is_children_custom && props.configType == 'custom-group') {
|
||||
console.log('同时按下了A和B键', props.configType); // 执行相应的操作
|
||||
}
|
||||
}
|
||||
// 阻止默认事件
|
||||
e.preventDefault();
|
||||
}
|
||||
const handleKeyUp = (e: KeyboardEvent) => {
|
||||
// 排除默认事件
|
||||
const default_list = ['textarea', 'input'];
|
||||
|
|
@ -820,11 +848,27 @@ const handleKeyUp = (e: KeyboardEvent) => {
|
|||
} else if (e.key === 'ArrowRight') { //右键
|
||||
x = 1;
|
||||
}
|
||||
// 阻止默认事件
|
||||
e.preventDefault();
|
||||
// 只有是点击上下左右的时候才会生效
|
||||
if (key_code.includes(e.key)) {
|
||||
data_handling(x, y);
|
||||
// 监听开启的是全局监听，为了避免全局监听的同时也监听了子组件的回退事件，所以需要判断当前是全局监听还是子组件监听
|
||||
if (!data_source_store.is_children_custom && props.configType == 'custom') {
|
||||
// 移除按键
|
||||
const key = e.key.toLowerCase();
|
||||
pressedKeys.delete(key);
|
||||
// 阻止默认事件
|
||||
e.preventDefault();
|
||||
// 只有是点击上下左右的时候才会生效
|
||||
if (key_code.includes(e.key)) {
|
||||
data_handling(x, y);
|
||||
}
|
||||
} else if (data_source_store.is_children_custom && props.configType == 'custom-group') {
|
||||
// 移除按键
|
||||
const key = e.key.toLowerCase();
|
||||
pressedKeys.delete(key);
|
||||
// 阻止默认事件
|
||||
e.preventDefault();
|
||||
// 只有是点击上下左右的时候才会生效
|
||||
if (key_code.includes(e.key)) {
|
||||
data_handling(x, y);
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
|
|
@ -885,11 +929,16 @@ const handleKeyUp = (e: KeyboardEvent) => {
|
|||
};
|
||||
// coordinate 新的坐标 current_size 当前坐标对应的组件大小(指的是组件的宽高) max_size 容器的最大大小
|
||||
const isWithinBounds = (coordinate:number, current_size: number, max_size: number) => coordinate >= 0 && coordinate + current_size <= max_size;
|
||||
|
||||
// 键盘控制
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handle_keydown);
|
||||
// 监听键盘事件
|
||||
document.addEventListener('keyup', handleKeyUp);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keyup', handleKeyUp);
|
||||
// 移除监听事件
|
||||
document.removeEventListener('keyup', handleKeyUp);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -130,6 +130,8 @@ const custom_edit = (type: string, id?: string, father_list?: any, list?: any, w
|
|||
custom_list.value = cloneDeep(form.value.custom_list);
|
||||
// 主自定义的高度
|
||||
center_height.value = cloneDeep(form.value.height);
|
||||
// 设置是否是子页面
|
||||
data_source_store.set_is_children_custom(false);
|
||||
} else {
|
||||
drag_group_key.value = Math.random().toString(36).substring(2);
|
||||
// 自定义组的弹出框
|
||||
|
|
@ -143,10 +145,14 @@ const custom_edit = (type: string, id?: string, father_list?: any, list?: any, w
|
|||
// 自定义组的默认宽高
|
||||
center_group_width.value = width || 0;
|
||||
center_group_height.value = height || 0;
|
||||
// 设置是否是子页面
|
||||
data_source_store.set_is_children_custom(true);
|
||||
}
|
||||
};
|
||||
// 点击完成的处理逻辑
|
||||
const accomplish = (type: string, list: any) => {
|
||||
// 点击完成，证明弹出框结束了，不管是子页面结束还是主页面结束，都是非子页面
|
||||
data_source_store.set_is_children_custom(false);
|
||||
// 如果是自定义点击完成，就更新主数据
|
||||
if (type == 'custom') {
|
||||
form.value.custom_list = list;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export const DataSourceStore = defineStore('dataSource', () => {
|
|||
data: data_list[];
|
||||
type: string;
|
||||
};
|
||||
const is_children_custom = ref(false);
|
||||
// 上传是否需要调接口判断
|
||||
const is_data_source_api = ref(false);
|
||||
// 数据源
|
||||
|
|
@ -27,10 +28,16 @@ export const DataSourceStore = defineStore('dataSource', () => {
|
|||
is_data_source_api.value = bool;
|
||||
};
|
||||
|
||||
const set_is_children_custom = (bool: boolean) => {
|
||||
is_children_custom.value = bool;
|
||||
};
|
||||
|
||||
return {
|
||||
is_children_custom,
|
||||
data_source_list,
|
||||
is_data_source_api,
|
||||
set_data_source,
|
||||
set_is_data_source_api,
|
||||
set_is_children_custom,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -534,3 +534,30 @@ export const adjustPosition = (x: number, y: number, width:number, height:number
|
|||
// 返回调整后的元素位置坐标
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
|
||||
export const getPlatform = () => {
|
||||
// 检查 navigator.platform 是否存在且不为空
|
||||
if (!navigator || !navigator.platform) {
|
||||
return 'Unknown';
|
||||
}
|
||||
|
||||
const platform = navigator.platform.toLowerCase();
|
||||
|
||||
// 使用正则表达式进行平台匹配
|
||||
const platformMap = [
|
||||
{ regex: /^win/, name: 'Windows' },
|
||||
{ regex: /^mac/, name: 'Mac' },
|
||||
{ regex: /^linux/, name: 'Linux' },
|
||||
{ regex: /android/, name: 'Android' },
|
||||
{ regex: /ios/, name: 'iOS' }
|
||||
];
|
||||
|
||||
for (const { regex, name } of platformMap) {
|
||||
if (regex.test(platform)) {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
return 'Unknown';
|
||||
}
|
||||
Loading…
Reference in New Issue