102 lines
3.4 KiB
Vue
102 lines
3.4 KiB
Vue
<template>
|
|
<view class="img-outer re oh" :style="com_style" @tap="url_open(form.text_link)">
|
|
<view :style="text_style" class="break">
|
|
<template v-if="form.is_rich_text == '1'">
|
|
<view class="rich-text-content" :innerHTML="text_title"></view>
|
|
</template>
|
|
<template v-else>
|
|
{{ text_title }}
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { radius_computer, padding_computer, isEmpty } from '@/common/js/common/common.js';
|
|
|
|
export default {
|
|
props: {
|
|
propValue: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
required: true,
|
|
},
|
|
sourceList: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
text_title: '',
|
|
text_style: '',
|
|
com_style: '',
|
|
};
|
|
},
|
|
created() {
|
|
this.setData({
|
|
form: this.propValue,
|
|
});
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.setData({
|
|
text_title: this.get_text_title(),
|
|
text_style: this.get_text_style(),
|
|
com_style: this.get_com_style(),
|
|
});
|
|
},
|
|
get_text_title() {
|
|
let text = '';
|
|
if (!isEmpty(this.form.text_title)) {
|
|
text = this.form.text_title;
|
|
} else if (!isEmpty(this.sourceList[this.form.data_source_id])) {
|
|
text = this.sourceList[this.form.data_source_id];
|
|
}
|
|
return text;
|
|
},
|
|
get_text_style() {
|
|
let style = `font-size: ${this.form.text_size * 2}rpx;color: ${this.form.text_color}; text-align: ${this.form.text_location}; transform: rotate(${this.form.text_rotate}deg);text-decoration: ${this.form.text_option};${padding_computer(this.form.text_padding)};box-sizing: border-box;`;
|
|
if (this.form.text_weight == 'italic') {
|
|
style += `font-style: italic`;
|
|
} else if (this.form.text_weight == '500') {
|
|
style += `font-weight: 500`;
|
|
}
|
|
return style;
|
|
},
|
|
get_com_style() {
|
|
let style = `background-color: ${this.form.com_bg}; ${radius_computer(this.form.bg_radius)}`;
|
|
if (this.form.border_show == '1') {
|
|
style += `border: ${this.form.border_size * 2}rpx ${this.form.border_style} ${this.form.border_color};`;
|
|
}
|
|
// 是富文本并且开启了上下滚动的开关
|
|
if (this.form.is_rich_text == '1' && this.form.is_up_down == '1') {
|
|
style += `overflow-y: auto;`;
|
|
}
|
|
return style;
|
|
},
|
|
url_open(link) {
|
|
this.$emit('url_open', link)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.break {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
.rich-text-content {
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
* {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|