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

新增自定义的跟随逻辑

v1.2.0
于肖磊 2025-02-20 18:01:02 +08:00
parent 3c4dd2a62e
commit 850efc04f0
5 changed files with 52 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,22 +1,52 @@
<template>
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<el-form-item label="跟随组件">
<el-select v-model="data_follow.follow_id" value-key="id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="follow_id_change()">
<el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
<template v-if="data_follow.follow_id != ''">
<el-form-item label="跟随方式">
<el-radio-group v-model="data_follow.follow_type" @change="operation_end">
<el-radio value="none">无</el-radio>
<el-radio value="left">跟随左侧</el-radio>
<el-radio value="top">跟随上边</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="跟随间距">
<slider v-model="data_follow.follow_spacing" :max="390" @operation_end="operation_end"></slider>
</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>
</el-form-item>
<el-form-item label="Y轴">
<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>
</el-form-item>
</card-container>
</template>
<script lang="ts" setup>
const props = defineProps({
options: {
type: Array<any>,
default: () => [],
},
});
// 跟随内容
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 emit = defineEmits(['operation_end']);
// 失去焦点时触发事件
const operation_end = () => {
emit('operation_end');
};
// 跟随id发生变化时的处理
const follow_id_change = () => {
}
// 监听y轴
watch(() => data_location.value.y, (val) => {
if (val !== data_location.value.staging_y) {

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

@ -205,7 +205,8 @@ const set_count = () => {
if (props.isDisplayPanel) {
return '';
} else {
return `width: ${ form.value.com_width }px; height: ${ form.value.com_height }px;`;
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;` }`;
}
};
</script>

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

@ -1,6 +1,6 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<el-form :model="form" label-width="80">
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
@ -86,10 +86,16 @@
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="容器宽度">
<el-form-item label="宽度自适应">
<el-switch v-model="form.is_width_auto" active-value="1" inactive-value="0" @change="operation_end"/>
</el-form-item>
<el-form-item :label="form.is_width_auto == '1' ? '最大宽度' : '容器宽度'">
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="容器高度">
<el-form-item label="高度自适应">
<el-switch v-model="form.is_height_auto" active-value="1" inactive-value="0" @change="operation_end"/>
</el-form-item>
<el-form-item :label="form.is_width_auto == '1' ? '最大高度' : '容器宽度'">
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
</el-form-item>
<el-form-item label="背景颜色">

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

@ -21,6 +21,9 @@ const text_com_data = {
middle: '',
right: '',
},
is_width_auto: '0',
is_height_auto: '0',
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
is_rich_text: '0',
is_up_down: '1',
text_color: '#000',
@ -77,6 +80,7 @@ const img_com_data = {
id: '',
option: {}
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
img_radius: {
radius: 0,
radius_top_left: 0,
@ -125,6 +129,7 @@ const line_com_data = {
type: '', // 条件类型
value: '', // 值
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
animation_style: {
type: 'none',
number: 'infinite',
@ -147,6 +152,7 @@ const icon_com_data = {
id: '',
option: {}
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
is_rich_icon: '0',
is_up_down: '1',
icon_color: '#000',
@ -197,6 +203,7 @@ const panel_com_data = {
id: '',
option: {}
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
icon_rotate: 0,
background_img_style: '2',
background_img: [],
@ -234,6 +241,7 @@ const custom_group_com_data = {
id: '',
option: []
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
// 条件判断
condition: {
field: '', // 字段id

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

@ -68,7 +68,7 @@
<div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
<DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#f00f00" @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="[`${ 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="{ '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')">
<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>