hwnc/components/ui-component/U_richtext/m/index.vue

<template>
	<view class="U0000010-template1" :class="className">
		<!-- style -->
		<view v-html="css"></view>
		<view :style="box_style" class="html-box" v-html="datas.html_value"></view>
	</view>
</template>
<script>
	// 自定义样式
	const css = function() {
		const {
			bg_color,
			padding_top,
			padding_bottom,
			padding_left,
			padding_right,
		} = this.datas;

		return `
        .component-${this.id} .html-box {
            background-color: ${bg_color || '#f8f8f8'};
            padding-top: ${padding_top}px;
            padding-bottom: ${padding_bottom}px;
            padding-left: ${padding_left}px;
            padding-right: ${padding_right}px;
        }

        .component-${this.id} .html-box p {
            margin: 0;
        }

        .component-${this.id} .html-box img {
            max-width: 100%;
        }
    `;
	};

	export default {
		props: ['datas', 'styles'],
		data() {
			return {}
		},
		computed: {
			box_style() {
				const {
					bg_color,
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
				} = this.datas;

				return `
				        background-color: ${bg_color || '#f8f8f8'};
				        padding-top: ${padding_top}px;
				        padding-bottom: ${padding_bottom}px;
				        padding-left: ${padding_left}px;
				        padding-right: ${padding_right}px;
				`;
			},
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},
		methods: {},

	};
</script>
<style lang="less" scoped>
	// 默认
	.component-wrapper {
		width: 750rpx;
	}

	.html-box {
		min-height: 60rpx;
		line-height: 60rpx;
	}
</style>