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

修改自定义显示逻辑

v1.0.0
于肖磊 2024-10-12 13:58:29 +08:00
parent 47beeb79a0
commit e6d1e36f12
7 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/custom-module/model-icon/index.vue
View File

@ -22,15 +22,19 @@ const props = defineProps({
isPercentage: {
type: Boolean,
default: false
},
scale: {
type: Number,
default: 1
}
});
// 用于页面判断显示
const form = reactive(props.value);
const com_style = computed(() => {
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding) };`;
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, props.scale) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding, props.scale) };`;
if (form.border_show == '1') {
style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
style += `border: ${form.border_size * props.scale}px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
}
if (form.icon_location == 'center') {
style += `justify-content: center;`;

8
src/components/common/custom-module/model-image/index.vue
View File

@ -23,6 +23,10 @@ const props = defineProps({
isPercentage: {
type: Boolean,
default: false
},
scale: {
type: Number,
default: 1
}
});
// 用于页面判断显示
@ -40,13 +44,13 @@ const img = computed(() => {
});
const image_style = computed(() => {
return `${ set_count() };transform: rotate(${form.img_rotate}deg); ${ radius_computer(form.img_radius) };`;
return `${ set_count() };transform: rotate(${form.img_rotate}deg); ${ radius_computer(form.img_radius, props.scale) };`;
});
const border_style = computed(() => {
let style = ``;
if (form.border_show == '1') {
style += `border: ${form.border_size}px ${form.border_style} ${form.border_color}; ${ radius_computer(form.border_radius) };`
style += `border: ${form.border_size * props.scale}px ${form.border_style} ${form.border_color}; ${ radius_computer(form.border_radius, props.scale) };`
}
return style;
});

8
src/components/common/custom-module/model-lines/index.vue
View File

@ -13,6 +13,10 @@ const props = defineProps({
isPercentage: {
type: Boolean,
default: false
},
scale: {
type: Number,
default: 1
}
});
// 用于页面判断显示
@ -20,9 +24,9 @@ const form = reactive(props.value);
const border_style = computed(() => {
if (form.line_settings === 'horizontal') {
return `${ set_count() } margin: 5px 0;border-bottom: ${form.line_size }px ${form.line_style} ${form.line_color};`;
return `${ set_count() } margin: 5px 0;border-bottom: ${form.line_size * props.scale }px ${form.line_style} ${form.line_color};`;
} else {
return `${ set_count() } margin: 0 5px;border-right: ${form.line_size }px ${form.line_style} ${form.line_color};`;
return `${ set_count() } margin: 0 5px;border-right: ${form.line_size * props.scale }px ${form.line_style} ${form.line_color};`;
}
});
const set_count = () => {

8
src/components/common/custom-module/model-panel/index.vue
View File

@ -22,15 +22,19 @@ const props = defineProps({
isPercentage: {
type: Boolean,
default: false
},
scale: {
type: Number,
default: 1
}
});
// 用于页面判断显示
const form = reactive(props.value);
const com_style = computed(() => {
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) }; transform: rotate(${form.panel_rotate}deg);`;
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, props.scale) }; transform: rotate(${form.panel_rotate}deg);`;
if (form.border_show == '1') {
style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};`;
style += `border: ${form.border_size * props.scale }px ${form.border_style} ${form.border_color};`;
}
return style;
});

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

@ -30,6 +30,10 @@ const props = defineProps({
isPercentage: {
type: Boolean,
default: false
},
scale: {
type: Number,
default: 1
}
});
// 用于页面判断显示
@ -47,7 +51,8 @@ const text_title = computed(() => {
});
const text_style = computed(() => {
let style = `font-size: ${ form.text_size }px;line-height: ${ form.text_size }px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding) };`;
console.log(form.text_size * props.scale);
let style = `font-size: ${ form.text_size * props.scale }px;line-height: ${ form.text_size * props.scale}px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding, props.scale) };`;
if (form.text_weight == 'italic') {
style += `font-style: italic`;
} else if (form.text_weight == '500') {
@ -57,7 +62,7 @@ const text_style = computed(() => {
});
const com_style = computed(() => {
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius) }`;
let style = `${ set_count() } ${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, props.scale) }`;
if (form.border_show == '1') {
style += `border: ${form.border_size}px ${form.border_style} ${form.border_color};`;
}

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

@ -4,19 +4,19 @@
<div class="w h re">
<div v-for="item 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)}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-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>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-image>
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-lines>
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-icon>
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-panel>
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-panel>
</template>
</div>
</div>
@ -45,7 +45,7 @@ const { form, new_style } = toRefs(state);
const custom_height = computed(() => form.value.height + 'px');
const container = ref<HTMLElement | null>(null);
const div_width = ref(0);
const scale = ref(0);
const scale = ref(1);
onMounted(() => {
if (container.value) {
div_width.value = container.value.offsetWidth;

8
src/utils/index.ts
View File

@ -152,8 +152,8 @@ export function gradient_handle(color_list: color_list[], direction: string, is_
* @param {string[], string} path
* @returns {string}
*/
export function padding_computer(new_style: paddingStyle) {
return `padding: ${new_style.padding_top || 0}px ${new_style.padding_right || 0}px ${new_style.padding_bottom || 0}px ${new_style.padding_left || 0}px;`;
export function padding_computer(new_style: paddingStyle, scale: number = 1) {
return `padding: ${new_style.padding_top * scale || 0}px ${new_style.padding_right * scale || 0}px ${new_style.padding_bottom * scale || 0}px ${new_style.padding_left * scale || 0}px;`;
}
/**
@ -172,8 +172,8 @@ export function margin_computer(new_style: marginStyle) {
* @param {string[], string} path
* @returns {string}
*/
export function radius_computer(new_style: radiusStyle) {
return `border-radius: ${new_style.radius_top_left || 0}px ${new_style.radius_top_right || 0}px ${new_style.radius_bottom_right || 0}px ${new_style.radius_bottom_left || 0}px;`;
export function radius_computer(new_style: radiusStyle, scale: number = 1) {
return `border-radius: ${new_style.radius_top_left * scale || 0}px ${new_style.radius_top_right * scale || 0}px ${new_style.radius_bottom_right * scale || 0}px ${new_style.radius_bottom_left * scale || 0}px;`;
}
/**