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

修改图片魔方逻辑

v1.0.0
于肖磊 2024-10-11 19:14:18 +08:00
parent 522f75135e
commit a33dd9dd3c
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/common/magic-cube/index.vue
View File

@ -13,17 +13,20 @@
<icon name="close" color="f" size="8"></icon>
</div>
<template v-if="item.img && !isEmpty(item.img[0] || '') && props.type == 'img'">
<image-empty v-model="item.img[0]"></image-empty>
<image-empty v-model="item.img[0]" :fit="styleActived == 10 ? 'contain' : 'cover'"></image-empty>
</template>
<template v-else>
<div class="cube-selected-text">
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
x
{{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
像素
<template v-if="props.type == 'data'">
<div>{{ data_title(item) }}</div>
<template v-if="styleActived !== 10">
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
x
{{ Math.round((750 / densityNum) * (item.end.y - item.start.y + 1)) }}
像素
<template v-if="props.type == 'data'">
<div>{{ data_title(item) }}</div>
</template>
</template>
<template v-else>不限尺寸</template>
</div>
</template>
</div>
@ -57,6 +60,7 @@ interface Props {
type?: string;
cubeWidth: number;
cubeHeight: number;
styleActived?: number;
}
const props = withDefaults(defineProps<Props>(), {
list: () => [],
@ -64,6 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
type: 'img',
cubeWidth: 390,
cubeHeight: 390,
styleActived: 0
});
const selected_active = ref(0);

11
src/components/model-img-magic/index.vue
View File

@ -18,6 +18,11 @@
</div>
</div>
</template>
<template v-else-if="form.style_actived == 10">
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'h': item.img.length > 0, 'style_actived_10': item.img.length == 0 }]" :style="selected_style(item)">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
</div>
</template>
<template v-else>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
<image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
@ -53,7 +58,8 @@ const spacing = computed(() => new_style.value.image_spacing / 2 + 'px');
const content_img_radius = computed(() => radius_computer(new_style.value));
//#region 容器大小计算
const div_width = ref(0);
const container_size = computed(() => div_width.value + 'px');
const container_size = computed(() => form.value.style_actived === 10 ? '100%' : div_width.value + 'px');
const container_size_10 = computed(() => div_width.value + 'px');
const container = ref<HTMLElement | null>(null);
onMounted(() => {
if (container.value) {
@ -129,6 +135,9 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
.img-spacing-border {
padding: v-bind(spacing);
}
.style_actived_10 {
height: v-bind(container_size_10) !important;
}
.style-size {
height: 100%;
width: 100%;

2
src/components/model-img-magic/model-img-magic-content.vue
View File

@ -45,7 +45,7 @@
</div>
</template>
<template v-else>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
<magic-cube :key="form.style_actived" :list="form.img_magic_list" :style-actived="form.style_actived" :flag="form.style_actived == 11" :cube-width="cubeWidth" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
</template>
</el-form-item>
</card-container>