sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

自定义页面添加显示隐藏处理逻辑

v1.3.0
于肖磊 2025-04-25 14:10:40 +08:00
parent 688c5d4f1e
commit 6eb7d3329d
7 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/maps/bd-map.vue
View File

@ -87,7 +87,7 @@ export default defineComponent({
map.value.panTo(e.point);
lat.value = e.point.lat;
lng.value = e.point.lng;
context.emit('point', lng, lat);
context.emit('point', lng.value, lat.value);
});
// 设置标注提示信息

6
src/components/common/custom-module/data-rendering/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div ref="allSignList" class="w h re custom-other">
<div v-for="(item, index) in list" :key="item.id" ref="signList" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="`left: ${ percentage_count(item.location.x, item.com_data.data_follow, 'left') }; top: ${ percentage_count(item.location.y, item.com_data.data_follow, 'top') }; width: ${ percentage_count(item.com_data.com_width, item.com_data.data_follow, 'width', item.com_data.is_width_auto, item.com_data.max_width) }; height: ${ percentage_count(item.com_data.com_height, item.com_data.data_follow, 'height', item.com_data.is_height_auto, item.com_data.max_height) };z-index: ${ item.is_enable == '1' ? ((list.length - 1) - index) : -999};`">
<div v-for="(item, index) in list" :key="item.id" ref="signList" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="`left: ${ percentage_count(item.location.x, item.com_data.data_follow, 'left') }; top: ${ percentage_count(item.location.y, item.com_data.data_follow, 'top') }; width: ${ percentage_count(item.com_data.com_width, item.com_data.data_follow, 'width', item.com_data.is_width_auto, item.com_data.max_width, item.is_enable) }; height: ${ percentage_count(item.com_data.com_height, item.com_data.data_follow, 'height', item.com_data.is_height_auto, item.com_data.max_height, item.is_enable) };z-index: ${ item.is_enable == '1' ? ((list.length - 1) - index) : -999};`">
<template v-if="item.is_enable == '1'">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
@ -187,7 +187,7 @@ watch(() => props.customList, async (val) => {
* @param {number} [max_size] - 可选参数，用于计算最大宽度或高度
* @returns {string} - 返回一个表示百分比或特定值的字符串，用于CSS样式
*/
const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number) => {
const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number, is_enable?: string) => {
// 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
if (['left', 'top'].includes(type)) {
const { id = '', type: follow_type = 'left' } = data_follow || { id: '', type: 'left' };
@ -213,7 +213,7 @@ watch(() => props.customList, async (val) => {
}
} else {
// 如果is_auto未设置或条件不满足，则根据比例缩放val并返回
return `${val * props.scale}px`;
return is_enable == '1' ? `${val * props.scale}px` : '0px';
}
}
}

4
src/components/common/custom-module/model-icon/index.vue
View File

@ -100,6 +100,10 @@ const data_handling = (data_source_id: string) => {
if (!isEmpty(props.sourceList.data) && props.isCustom) {
icon = get_nested_property(props.sourceList.data, data_source_id);
}
if (Array.isArray(icon)) {
// 如果是数组，使用 join 方法转换为字符串
icon = icon.join(', ');
}
return icon;
}
// 外层样式

4
src/components/common/custom-module/model-image/index.vue
View File

@ -104,6 +104,10 @@ const data_handling = (data_source_id: string) => {
image_url = get_nested_property(props.sourceList.data, data_source_id);
}
}
if (Array.isArray(image_url)) {
// 如果是数组，使用 join 方法转换为字符串
image_url = image_url.join(', ');
}
return image_url;
}
// 图片的样式

2
src/components/common/custom-module/model-text/index.vue
View File

@ -234,7 +234,7 @@ watch(() => props.value, (value) => {
// }
});
}
}, { deep: true });
}, { immediate:true, deep: true });
</script>
<style lang="scss" scoped>

28
src/components/model-custom/components/index.vue
View File

@ -31,9 +31,9 @@
<VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" @sort="on_sort">
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col h">
<template v-if="!isEmpty(diy_data)">
<li v-for="(item, index) in diy_data" :key="index" :class="['flex-row gap-y-8 re align-c drawer-drag', { 'drawer-custom-drag-bg': item.show_tabs == '1' }]" @click="on_choose(index, item.show_tabs)" @dblclick="double_click(index)">
<li v-for="(item, index) in diy_data" :key="index" :class="['flex-row gap-y-8 re align-c drawer-drag', { 'drawer-custom-drag-bg': item.show_tabs == '1' }]" @click="on_choose(index, item.show_tabs)">
<el-icon class="iconfont icon-drag size-16 cr-d" />
<div class="text-line-1 flex align-c" style="width: 60%;">
<div class="text-line-1 flex align-c" style="width: 60%;" @dblclick="double_click(index)">
<template v-if="edit_index == index">
<el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" resize="none" />
</template>
@ -43,7 +43,7 @@
</div>
<div class="abs draggable-icon" :style="item.show_tabs == '1' ? 'opacity: 1;' : 'opacity: 0.5;'">
<el-icon :class="`iconfont eye-before size-16 ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="on_show_or_hidden(index)" />
<el-icon class="iconfont icon-edit size-16 cr-primary do-not-trigger two-click" @click="on_edit(index)" />
<el-icon class="iconfont icon-edit size-16 cr-primary do-not-trigger two-click" @click.stop="on_edit(index)" />
<el-icon class="iconfont icon-close-round-o size-16" @click.stop="del(index)" />
</div>
</li>
@ -72,7 +72,7 @@
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id + item.com_data.is_data_update" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line && item.is_enable == '1', 'plug-in-show-tabs': item.show_tabs == '1' && item.is_enable == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="[`${ item.com_data.is_width_auto == '1' ? 'width: auto;' : '' }${ item.com_data.is_height_auto == '1' ? 'height: auto;' : '' }`, { 'z-index': item.is_enable == '1' ? (diy_data.length - 1) - index : -999 }]" :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, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
<div v-if="item.is_enable == '1'" :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" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'" @container_change="(...value: [number, number]) => container_change(...value, index, item.id)"></model-text>
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'" :is-enable="item.is_enable" @container_change="(...value: [number, number]) => container_change(...value, index, item.id)"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :img-params="showData?.data_logo || ''"></model-image>
@ -243,11 +243,23 @@ onUnmounted(() => {
});
const edit_index = ref(-1);
// 隐藏显示的处理逻辑
const on_show_or_hidden = (index: number) => {
// 获取当前点击的元素
const item = diy_data.value[index];
item.is_enable = item.is_enable == '1' ? '0' : '1';
operation_end(item.new_name + (item.is_enable == '1' ? '显示' : '隐藏'));
if (typeof index === 'number' && !isNaN(index)) {
// 获取当前点击的元素
const item = diy_data.value[index];
item.is_enable = item.is_enable == '1' ? '0' : '1';
// 隐藏之后重新计算跟随组件的位置
const { com_width, com_height } = item.com_data;
const width = item.is_enable == '0' ? 0 : com_width;
const height = item.is_enable == '0' ? 0 : com_height;
const filter_index = diy_data.value.findIndex(find_item => item.id == find_item.com_data?.data_follow?.id);
if (filter_index != -1) {
diy_data_handle(diy_data.value, item.id, item.location, width, height);
}
// 最后记录数据，避免中间数据出现缺失
operation_end(item.new_name + (item.is_enable == '1' ? '显示' : '隐藏'));
}
}
const on_edit = (index: number) => {

11
src/utils/index.ts
View File

@ -967,6 +967,7 @@ export const diy_data_handle = (data: any, old_id: string, new_val: any, com_wid
*/
interface Item {
id: string;
is_enable: string;
location: { x: number; y: number };
com_data: { com_width: number; com_height: number };
}
@ -990,11 +991,13 @@ export const get_container_location = (list: Item[], id: string, type: 'left' |
// 遍历项列表，寻找匹配给定ID的项
for (const item of list) {
if (item.id === id) {
// 解构获取项的位置和组件数据，如果没有提供则使用默认值
const { location = { x: 0, y: 0 }, com_data = { com_width: 0, com_height: 0 } } = item;
// 解构获取项的位置和组件数据，如果没有提供则使用默认
const { location = { x: 0, y: 0 }, com_data = { com_width: 0, com_height: 0 }, is_enable = '0' } = item;
const width = is_enable == '1' ? com_data.com_width : 0;
const height = is_enable == '1' ? com_data.com_height : 0;
// 计算新的x和y坐标，根据组件的宽度/高度和间距
const new_x = location.x + com_data.com_width + spacing;
const new_y = location.y + com_data.com_height + spacing;
const new_x = location.x + width + spacing;
const new_y = location.y + height + spacing;
// 根据type参数更新x或y坐标
if (type === 'left') {