修改自定义显示逻辑
parent
cbdbc95d8c
commit
744b961aec
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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;`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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};`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue