From 744b961aec60a5f3e23e212caf5e3aaa5160080c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Wed, 16 Oct 2024 13:43:02 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/diy/custom.vue | 8 ++------ components/diy/modules/custom/model-icon.vue | 13 +++++-------- components/diy/modules/custom/model-image.vue | 17 ++++++----------- components/diy/modules/custom/model-lines.vue | 13 ++++--------- components/diy/modules/custom/model-panel.vue | 13 ++++--------- components/diy/modules/custom/model-text.vue | 19 +++++++------------ 6 files changed, 28 insertions(+), 55 deletions(-) diff --git a/components/diy/custom.vue b/components/diy/custom.vue index 6b2f1324..6eda7afe 100644 --- a/components/diy/custom.vue +++ b/components/diy/custom.vue @@ -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), diff --git a/components/diy/modules/custom/model-icon.vue b/components/diy/modules/custom/model-icon.vue index 15c2932d..86b1eaed 100644 --- a/components/diy/modules/custom/model-icon.vue +++ b/components/diy/modules/custom/model-icon.vue @@ -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;`; diff --git a/components/diy/modules/custom/model-image.vue b/components/diy/modules/custom/model-image.vue index 01428bf0..e73d1f77 100644 --- a/components/diy/modules/custom/model-image.vue +++ b/components/diy/modules/custom/model-image.vue @@ -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; }, diff --git a/components/diy/modules/custom/model-lines.vue b/components/diy/modules/custom/model-lines.vue index f6707261..e4f4e373 100644 --- a/components/diy/modules/custom/model-lines.vue +++ b/components/diy/modules/custom/model-lines.vue @@ -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};`; } } }, diff --git a/components/diy/modules/custom/model-panel.vue b/components/diy/modules/custom/model-panel.vue index a4930b1d..efc909d4 100644 --- a/components/diy/modules/custom/model-panel.vue +++ b/components/diy/modules/custom/model-panel.vue @@ -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; }, diff --git a/components/diy/modules/custom/model-text.vue b/components/diy/modules/custom/model-text.vue index 5743f4ac..ea129db0 100644 --- a/components/diy/modules/custom/model-text.vue +++ b/components/diy/modules/custom/model-text.vue @@ -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') {