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

修改自定义处理逻辑

v1.1.0
于肖磊 2024-10-29 13:59:22 +08:00
parent 10ddeee7c7
commit 9989e99da9
1 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<template>
<div ref="container" :style="style_container">
<div :style="style_container">
<div class="w h" :style="style_img_container">
<div class="w h re custom-other">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x * scale, div_width) , 'top': percentage_count(item.location.y * scale, form.height), 'width': percentage_count(item.com_data.com_width * scale, div_width), 'height': percentage_count(item.com_data.com_height * scale, form.height), 'z-index': (form.custom_list.length - 1) - index}">
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height), 'z-index': (form.custom_list.length - 1) - index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-text>
</template>
@ -24,7 +24,7 @@
</div>
</template>
<script setup lang="ts">
import { common_img_computer, common_styles_computer, percentage_count } from '@/utils';
import { common_img_computer, common_styles_computer } from '@/utils';
const props = defineProps({
value: {
@ -42,26 +42,29 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const custom_height = computed(() => form.value.height + 'px');
const container = ref<HTMLElement | null>(null);
const custom_height = computed(() => form.value.height * scale.value + 'px');
const div_width = ref(0);
const scale = ref(1);
// 获取当前宽度 和 缩放比例
onMounted(() => {
if (container.value) {
div_width.value = container.value.offsetWidth;
scale.value = div_width.value / 390;
}
const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
// 根据容器宽度来计算内部大小
div_width.value = 390 - margin_left - margin_right - padding_left - padding_right;
// 获得对应宽度的比例
scale.value = div_width.value / 390;
});
const percentage_count = (val: number, container_size: number) => {
return val * scale.value + 'px';
};
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
watch(() => new_style.value.common_style, (val) => {
if (container.value) {
div_width.value = container.value.offsetWidth;
scale.value = div_width.value / 390;
}
const { margin_left, margin_right, padding_left, padding_right } = val;
// 根据容器宽度来计算内部大小
div_width.value = 390 - margin_left - margin_right - padding_left - padding_right;
// 获得对应宽度的比例
scale.value = div_width.value / 390;
}, { deep: true });
</script>
<style lang="scss" scoped>