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

新增文本宽高自定义配置

v1.2.0
于肖磊 2025-02-21 11:45:10 +08:00
parent 850efc04f0
commit 08293737e1
5 changed files with 80 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/common/custom-module/custom-location/index.vue
View File

@ -19,10 +19,10 @@
</el-form-item>
</template>
<el-form-item v-if="data_follow.follow_type != 'left'" label="X轴">
<slider v-model="data_location.x" :max="390" @operation_end="operation_end"></slider>
<slider v-model="data_location.x" :max="390" @operation_end="operation_end" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item v-if="data_follow.follow_type != 'top'" label="Y轴">
<slider v-model="data_location.y" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="data_location.y" :max="1000" @operation_end="operation_end" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
</template>
@ -37,20 +37,24 @@ const props = defineProps({
// 跟随内容
const data_follow = defineModel('follow', { type: Object, default: { follow_type: 'none', follow_id: '', follow_spacing: 0 }});
// x轴 Y轴设计
const data_location = defineModel({ type: Object, default: () => ({ x: 0, y: 0, staging_y: 0 }) });
const data_location = defineModel({ type: Object, default: () => ({ x: 0, y: 0, record_x: 0, record_y: 0, staging_y: 0 }) });
const emit = defineEmits(['operation_end']);
// 失去焦点时触发事件
const operation_end = () => {
emit('operation_end');
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
data_location.value.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
data_location.value.record_y = val;
data_location.value.staging_y = val
};
// 跟随id发生变化时的处理
const follow_id_change = () => {
emit('operation_end');
}
// 监听y轴
watch(() => data_location.value.y, (val) => {
if (val !== data_location.value.staging_y) {
data_location.value.staging_y = val;
}
});
</script>

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

@ -1,5 +1,5 @@
<template>
<div v-if="is_show" class="img-outer w h re oh" :style="com_style">
<div v-if="is_show" ref="modelText" class="img-outer w h re oh" :style="com_style">
<div :style="text_style" class="text-word-break">
<template v-if="form.is_rich_text == '1'">
<div class="rich-text-content" :innerHTML="text_title"></div>
@ -205,14 +205,37 @@ const set_count = () => {
if (props.isDisplayPanel) {
return '';
} else {
const { com_width = 0, com_height = 0, is_width_auto = '0', is_height_auto = '0'} = form.value;
return `${ is_width_auto == '1' ? `width:100%;max-width: ${ com_width }px;` : `width:${ com_width }px;`}${ is_height_auto == '1' ? `height:100%;max-height: ${ com_height }px;` : `height: ${ com_height }px;` }`;
const { com_width = 0, com_height = 0, is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0} = form.value;
const new_max_width = max_width > 0 ? `max-width: ${ max_width }px;` : 'white-space: nowrap;';
const new_max_height = max_height > 0 ? `max-height: ${ max_height }px;` : '';
return `${ is_width_auto == '1' ? `width:100%;${ new_max_width }` : `width:${ com_width }px;`}${ is_height_auto == '1' ? `height:100%;${ new_max_height }` : `height: ${ com_height }px;` }`;
}
};
const emits = defineEmits(['container_change']);
// 开启自定义的时候重新计算高度和宽度
const modelText = ref<HTMLElement | null>(null);
watch(() => form.value, (value) => {
const { is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0 , com_width = 0, com_height = 0} = form.value;
let new_width = com_width;
let new_height = com_height;
// 宽度自适应时 获取当前容器的宽度
if (is_width_auto == '1') {
new_width = modelText.value?.clientWidth || 0;
}
// 高度自适应时时 获取当前容器的高度
if (is_height_auto == '1') {
new_height = modelText.value?.clientHeight || 0;
}
// 如果跟历史的宽度或者高度不同，则更新
if (new_width !== com_width && new_height !== com_height) {
emits('container_change', new_width, new_height)
}
}, { deep: true });
</script>
<style lang="scss" scoped>
.rich-text-content {
white-space: normal;
// white-space: normal;
word-break:break-all;
* {
max-width: 100%;

24
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -87,15 +87,21 @@
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="宽度自适应">
<el-switch v-model="form.is_width_auto" active-value="1" inactive-value="0" @change="operation_end"/>
<el-switch v-model="form.is_width_auto" active-value="1" inactive-value="0" @change="is_width_auto_change"/>
</el-form-item>
<el-form-item :label="form.is_width_auto == '1' ? '最大宽度' : '容器宽度'">
<el-form-item v-if="form.is_width_auto == '1'" label="最大宽度">
<slider v-model="form.max_width" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item v-else label="容器宽度">
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="高度自适应">
<el-switch v-model="form.is_height_auto" active-value="1" inactive-value="0" @change="operation_end"/>
<el-switch v-model="form.is_height_auto" active-value="1" inactive-value="0" @change="is_height_auto_change"/>
</el-form-item>
<el-form-item :label="form.is_width_auto == '1' ? '最大高度' : '容器宽度'">
<el-form-item v-if="form.is_height_auto == '1'" label="最大高度">
<slider v-model="form.max_height" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item v-else label="容器高度">
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="背景颜色">
@ -212,6 +218,16 @@ const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end', get_history_name(diy_data.value));
};
const is_width_auto_change = (val: string | number | boolean) => {
if (val == '1') {
form.value.max_width = form.value.com_width;
}
};
const is_height_auto_change = (val: string | number | boolean) => {
if (val == '1') {
form.value.max_height = form.value.com_height;
}
};
// #region 位置计算
// 监听数据变化
watch(

2
src/components/model-custom/components/index-default.ts
View File

@ -23,6 +23,8 @@ const text_com_data = {
},
is_width_auto: '0',
is_height_auto: '0',
max_width: 150,
max_height: 17,
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
is_rich_text: '0',
is_up_down: '1',

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

@ -71,7 +71,7 @@
<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="[`${ animation_class(item.com_data) } `, {'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="[`${ item.com_data.is_width_auto == '1' ? 'width: auto;' : '' }${ item.com_data.is_height_auto == '1' ? 'height: auto;' : '' }`, { '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, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
<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" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'"></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'" @container_change="(...value: [number, number]) => container_change(...value, index)"></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>
@ -116,6 +116,7 @@ import { get_math, adjustPosition, getPlatform, get_history_name } from '@/utils
import { defaultComData, isRectangleIntersecting } from "./index-default";
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
import { commonStore, DataSourceStore } from '@/store';
import { ItemProps } from 'element-plus';
const common_store = commonStore();
// 删除
const app = getCurrentInstance();
@ -429,6 +430,16 @@ const cancel = () => {
emits('rightUpdate', {});
};
//#endregion
//#region 文本开启自适应时的处理
const container_change = (width: number, height: number, index: number,) => {
diy_data.value.forEach((item, index1) => {
if (index == index1) {
item.com_data.com_width = width;
item.com_data.com_height = height;
}
});
}
//#endregion
//#region 容器高度发生变化时的处理，拖拽组件高度变化时数据需要重新赋值，避免拖拽不到新高度的区域
const center_height = defineModel('height', { type: Number, default: 0 });
const center_width = defineModel('width', { type: Number, default: 390 });
@ -461,6 +472,7 @@ watch(() => center_height.value, () => {
// 规整历史数据，避免有新增字段不存在导致报错
...Object.assign({}, cloneDeep((defaultComData as any)[`${item.key}_com_data`]), item.com_data),
com_height: item.com_data.staging_height,
...(item.key == 'text' ? { max_height:item.com_data.staging_height } : {}),
data_source_field: {
...item.com_data?.data_source_field ?? { id: item.key == 'text' ? [] : '', option: item.key == 'text' ? [] : {} },
id: !isEmpty(item.com_data?.data_source_field?.id || '') ? item.com_data.data_source_field.id : item.key == 'text' ? [] : '',
@ -559,6 +571,10 @@ const resizingHandle = (new_location: any, key: string, index: number, type: str
com_data.com_width = w;
com_data.com_height = h;
com_data.staging_height = h;
if (key == 'text') {
com_data.max_width = w;
com_data.max_height = w;
}
// 图片和线的宽高需要重新计算
if (key == 'img') {
const { img_width, img_height } = handleImg(com_data, w, h);