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

自定义新增x轴和y轴的处理

v1.1.0
于肖磊 2024-11-06 18:38:00 +08:00
parent 6d648cd30a
commit 22baf253bf
8 changed files with 106 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -1,6 +1,16 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">文本设置</div>
<el-form-item label="选择图标">
@ -126,6 +136,16 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.direction = type.toString();
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
watch(
diy_data,
(val) => {

20
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -1,6 +1,16 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">图片设置</div>
<el-form-item label="上传图片">
@ -95,6 +105,16 @@ const img_src_change = (key: string) => {
}
}
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
watch(
diy_data,
(val) => {

20
src/components/common/custom-module/model-lines/model-lines-style.vue
View File

@ -1,6 +1,16 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container class="">
<div class="mb-12">线条设置</div>
<el-form-item label="竖线横线">
@ -56,6 +66,16 @@ const { diy_data } = toRefs(state);
const form = ref(diy_data.value.com_data);
const center_height = defineModel("height", { type: Number, default: 0 })
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
watch(diy_data, (val) => {
let width = 0;
let height = 0;

20
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -1,6 +1,16 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="链接">
@ -95,6 +105,16 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.direction = type.toString();
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
watch(
diy_data,
(val) => {

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

@ -1,6 +1,16 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">文本设置</div>
<el-form-item label="文本内容">
@ -148,6 +158,15 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
watchEffect(() => {
form.value.line_text_size = form.value.text_size;

2
src/components/common/drag-group/index.vue
View File

@ -47,7 +47,7 @@ onUnmounted(() => {
const edit_index = ref(-1);
// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
const outerClick = (e: any) => {
if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
if ((!isEmpty(e.target.className) && !e.target.className.includes('do-not-trigger')) && (!isEmpty(e.target.parentNode.className) && !e.target.parentNode.className.includes('do-not-trigger'))) {
edit_close_processing(edit_index.value);
edit_index.value = -1;
}

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

@ -217,7 +217,7 @@ const on_edit = (index: number) => {
};
// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
const outerClick = (e: any) => {
if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
if ((!isEmpty(e.target.className) && !e.target.className.includes('do-not-trigger')) && (!isEmpty(e.target.parentNode.className) && !e.target.parentNode.className.includes('do-not-trigger'))) {
edit_close_processing(edit_index.value);
edit_index.value = -1;
}

8
src/components/model-title/model-title-styles.vue
View File

@ -15,6 +15,11 @@
</div>
</el-form-item>
</template>
<template v-if="!isEmpty(content.img_src)">
<el-form-item label="图片高度">
<slider v-model="form.img_height" :max="500"></slider>
</el-form-item>
</template>
<el-form-item label="主标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.title_color" default-color="#000000"></color-picker>
@ -46,9 +51,6 @@
<el-switch v-model="form.title_line" active-value="1" inactive-value="0" />
</el-form-item>
</template>
<el-form-item label="图片高度">
<slider v-model="form.img_height" :max="500"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>