修改自定义显示逻辑
parent
7220e07b6e
commit
240fdfc3f3
|
|
@ -107,8 +107,12 @@ export function gradient_handle (color_list, direction, is_return_all = true) {
|
|||
* @param {string[], string} path
|
||||
* @returns {string}
|
||||
*/
|
||||
export function padding_computer (new_style, scale = 1) {
|
||||
return `padding: ${new_style.padding_top * scale * 2 || 0}rpx ${new_style.padding_right * scale * 2 || 0}rpx ${new_style.padding_bottom * scale * 2 || 0}rpx ${new_style.padding_left * scale * 2 || 0}rpx;`;
|
||||
export function padding_computer (new_style, scale = 1, is_custom = false) {
|
||||
if (!is_custom) {
|
||||
return `padding: ${new_style.padding_top * 2 || 0}rpx ${new_style.padding_right * 2 || 0}rpx ${new_style.padding_bottom * 2 || 0}rpx ${new_style.padding_left * 2 || 0}rpx;`;
|
||||
} else {
|
||||
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;`;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 设置外边距的方法
|
||||
|
|
@ -125,8 +129,13 @@ export function margin_computer (new_style) {
|
|||
* @param {string[], string} path
|
||||
* @returns {string}
|
||||
*/
|
||||
export function radius_computer (new_style, scale = 1) {
|
||||
return `border-radius: ${new_style.radius_top_left * scale * 2 || 0}rpx ${new_style.radius_top_right * scale * 2 || 0}rpx ${new_style.radius_bottom_right * scale * 2 || 0}rpx ${new_style.radius_bottom_left * scale * 2 || 0}rpx;`;
|
||||
export function radius_computer (new_style, scale = 1, is_custom = false) {
|
||||
if (!is_custom) {
|
||||
return `border-radius: ${new_style.radius_top_left * 2 || 0}rpx ${new_style.radius_top_right * 2 || 0}rpx ${new_style.radius_bottom_right * 2 || 0}rpx ${new_style.radius_bottom_left * 2 || 0}rpx;`;
|
||||
} else {
|
||||
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;`;
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* 设置阴影样式
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="img-outer pr oh flex-row align-c wh-auto ht-auto" :style="com_style" :data-value="form.icon_link.page" @tap="url_event">
|
||||
<iconfont :name="'icon-' + form.icon_class" :color="form.icon_color" :size="form.icon_size * propScale * 2 + 'rpx'"></iconfont>
|
||||
<iconfont :name="'icon-' + form.icon_class" :color="form.icon_color" :size="form.icon_size * scale + 'px'"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -57,9 +57,9 @@
|
|||
});
|
||||
},
|
||||
get_com_style(form) {
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, this.scale) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding, this.scale) };`;
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, this.scale, true) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding, this.scale, true) };`;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * this.scale * 2 }rpx ${form.border_style} ${form.border_color};box-sizing: border-box;`;
|
||||
style += `border: ${form.border_size * this.scale }px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
|
||||
}
|
||||
if (form.icon_location == 'center') {
|
||||
style += `justify-content: center;`;
|
||||
|
|
|
|||
|
|
@ -75,12 +75,12 @@
|
|||
}
|
||||
},
|
||||
get_image_style(form) {
|
||||
return `width: ${percentage_count(form.img_width, form.com_width)}; height: ${percentage_count(form.img_height, form.com_height)};transform: rotate(${form.img_rotate}deg); ${radius_computer(form.img_radius, this.scale)};`;
|
||||
return `width: ${percentage_count(form.img_width, form.com_width)}; height: ${percentage_count(form.img_height, form.com_height)};transform: rotate(${form.img_rotate}deg); ${radius_computer(form.img_radius, this.scale, true)};`;
|
||||
},
|
||||
get_border_style(form) {
|
||||
let style = ``;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * this.scale * 2}rpx ${form.border_style} ${form.border_color}; ${radius_computer(form.border_radius, this.scale)};box-sizing: border-box;`;
|
||||
style += `border: ${form.border_size * this.scale }px ${form.border_style} ${form.border_color}; ${radius_computer(form.border_radius, this.scale, true)};box-sizing: border-box;`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@
|
|||
},
|
||||
get_border_style(form) {
|
||||
if (form.line_settings === 'horizontal') {
|
||||
return `margin: 10rpx 0;border-bottom: ${form.line_size * this.scale * 2}rpx ${form.line_style} ${form.line_color};`;
|
||||
return `margin: 10rpx 0;border-bottom: ${form.line_size * this.scale }px ${form.line_style} ${form.line_color};`;
|
||||
} else {
|
||||
return `margin: 0 10rpx;border-right: ${form.line_size * this.scale * 2}rpx ${form.line_style} ${form.line_color};`;
|
||||
return `margin: 0 10rpx;border-right: ${form.line_size * this.scale }px ${form.line_style} ${form.line_color};`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@
|
|||
});
|
||||
},
|
||||
get_com_style(form) {
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, this.scale)}; transform: rotate(${form.panel_rotate}deg);`;
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, this.scale, true)}; transform: rotate(${form.panel_rotate}deg);`;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * this.scale * 2}rpx ${form.border_style} ${form.border_color};`;
|
||||
style += `border: ${form.border_size * this.scale }px ${form.border_style} ${form.border_color};`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
return text;
|
||||
},
|
||||
get_text_style(form) {
|
||||
let style = `font-size: ${form.text_size * this.scale * 2}rpx;line-height: ${form.text_size * this.scale * 2}rpx;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, this.scale)};box-sizing: border-box;`;
|
||||
let style = `font-size: ${form.text_size * this.scale }px;line-height: ${form.text_size * this.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, this.scale, true)};box-sizing: border-box;`;
|
||||
if (form.text_weight == 'italic') {
|
||||
style += `font-style: italic`;
|
||||
} else if (form.text_weight == '500') {
|
||||
|
|
@ -86,9 +86,9 @@
|
|||
return style;
|
||||
},
|
||||
get_com_style(form) {
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, this.scale)}`;
|
||||
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, this.scale, true)}`;
|
||||
if (form.border_show == '1') {
|
||||
style += `border: ${form.border_size * this.scale * 2}rpx ${form.border_style} ${form.border_color};`;
|
||||
style += `border: ${form.border_size * this.scale }px ${form.border_style} ${form.border_color};`;
|
||||
}
|
||||
// 是富文本并且开启了上下滚动的开关
|
||||
if (form.is_rich_text == '1' && form.is_up_down == '1') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue