修改自定义显示逻辑

master
于肖磊 2024-10-16 13:43:02 +08:00
parent cbdbc95d8c
commit 744b961aec
6 changed files with 28 additions and 55 deletions

View File

@ -90,15 +90,11 @@ export default {
const new_style = this.propValue.style;
const { margin_left, margin_right } = new_style.common_style;
const width = sys_width - margin_left - margin_right;
this.$nextTick(() => {
this.setData({
div_width: width,
scale: width / 390,
});
});
this.setData({
form: new_form,
new_style: new_style,
div_width: width,
scale: width / 390,
custom_list_length: new_form.custom_list.length - 1,
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', //
style_img_container: common_img_computer(new_style.common_style),

View File

@ -38,10 +38,6 @@
};
},
watch: {
propScale(val) {
this.scale = val;
this.init();
},
propkey(val) {
this.init();
}
@ -53,13 +49,14 @@
init() {
this.setData({
form: this.propValue,
com_style: this.get_com_style(this.propValue),
scale: this.propScale,
com_style: this.get_com_style(this.propValue, this.propScale),
});
},
get_com_style(form) {
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) };`;
get_com_style(form, scale) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, scale, true) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding, scale, true) };`;
if (form.border_show == '1') {
style += `border: ${form.border_size * this.scale }px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
}
if (form.icon_location == 'center') {
style += `justify-content: center;`;

View File

@ -39,14 +39,9 @@
img: '',
image_style: '',
border_style: '',
scale: 1,
};
},
watch: {
propScale(val) {
this.scale = val;
this.init();
},
propkey(val) {
this.init();
}
@ -59,8 +54,8 @@
this.setData({
form: this.propValue,
img: this.get_img_url(this.propValue),
image_style: this.get_image_style(this.propValue),
border_style: this.get_border_style(this.propValue),
image_style: this.get_image_style(this.propValue, this.propScale),
border_style: this.get_border_style(this.propValue, this.propScale),
});
},
get_img_url(form) {
@ -74,13 +69,13 @@
}
}
},
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, true)};`;
get_image_style(form, 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, scale, true)};`;
},
get_border_style(form) {
get_border_style(form, scale) {
let style = ``;
if (form.border_show == '1') {
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;`;
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color}; ${radius_computer(form.border_radius, scale, true)};box-sizing: border-box;`;
}
return style;
},

View File

@ -24,14 +24,9 @@
return {
form: {},
border_style: '',
scale: 1,
};
},
watch: {
propScale(val) {
this.scale = val;
this.init();
},
propkey(val) {
this.init();
}
@ -43,14 +38,14 @@
init() {
this.setData({
form: this.propValue,
border_style: this.get_border_style(this.propValue),
border_style: this.get_border_style(this.propValue, this.propScale),
});
},
get_border_style(form) {
get_border_style(form, scale) {
if (form.line_settings === 'horizontal') {
return `margin: 10rpx 0;border-bottom: ${form.line_size * this.scale }px ${form.line_style} ${form.line_color};`;
return `margin: 10rpx 0;border-bottom: ${form.line_size * scale }px ${form.line_style} ${form.line_color};`;
} else {
return `margin: 0 10rpx;height:100%;border-right: ${form.line_size * this.scale }px ${form.line_style} ${form.line_color};`;
return `margin: 0 10rpx;height:100%;border-right: ${form.line_size * scale }px ${form.line_style} ${form.line_color};`;
}
}
},

View File

@ -36,14 +36,9 @@
text_title: '',
text_style: '',
com_style: '',
scale: 1,
};
},
watch: {
propScale(val) {
this.scale = val;
this.init();
},
propkey(val) {
this.init();
}
@ -55,14 +50,14 @@
init() {
this.setData({
form: this.propValue,
com_style: this.get_com_style(this.propValue),
com_style: this.get_com_style(this.propValue, this.propScale),
com_img_style: this.get_com_img_style(this.propValue),
});
},
get_com_style(form) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, this.scale, true)}; transform: rotate(${form.panel_rotate}deg);`;
get_com_style(form, scale) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, scale, true)}; transform: rotate(${form.panel_rotate}deg);`;
if (form.border_show == '1') {
style += `border: ${form.border_size * this.scale }px ${form.border_style} ${form.border_color};`;
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};`;
}
return style;
},

View File

@ -43,14 +43,9 @@
text_title: '',
text_style: '',
com_style: '',
scale: 1,
};
},
watch: {
propScale(val) {
this.scale = val;
this.init();
},
propkey(val) {
this.init();
}
@ -63,8 +58,8 @@
this.setData({
form: this.propValue,
text_title: this.get_text_title(this.propValue),
text_style: this.get_text_style(this.propValue),
com_style: this.get_com_style(this.propValue),
text_style: this.get_text_style(this.propValue, this.propScale),
com_style: this.get_com_style(this.propValue, this.propScale),
});
},
get_text_title(form) {
@ -76,8 +71,8 @@
}
return text;
},
get_text_style(form) {
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;`;
get_text_style(form, scale) {
let style = `font-size: ${form.text_size * scale }px;line-height: ${form.text_size * 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, scale, true)};box-sizing: border-box;`;
if (form.text_weight == 'italic') {
style += `font-style: italic`;
} else if (form.text_weight == '500') {
@ -85,10 +80,10 @@
}
return style;
},
get_com_style(form) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, this.scale, true)}`;
get_com_style(form, scale) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, scale, true)}`;
if (form.border_show == '1') {
style += `border: ${form.border_size * this.scale }px ${form.border_style} ${form.border_color};`;
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};`;
}
//
if (form.is_rich_text == '1' && form.is_up_down == '1') {