englishread-front/uni_modules/yingbing-ReadPage/components/yingbing-text-reader/content.vue

<template>
	<view class="yingbing-content">
		<text space="nbsp" :selectable="selectable" :user-select="selectable" :style="[contentStyle]" v-for="(t, i) in item.contents" :key="i">{{t}}</text>
	</view>
</template>

<script>
	export default {
		inject: ['getColor', 'getFontSize', 'getFontFamily', 'getLineGap', 'getSelectable'],
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			color () {
				return this.getColor()
			},
			fontSize () {
				return this.getFontSize()
			},
			fontFamily () {
				return this.getFontFamily()
			},
			lineGap () {
				return this.getLineGap()
			},
			selectable () {
				return this.getSelectable()
			},
			contentStyle () {
				 return {
					 'color': this.color,
					 'font-size': this.fontSize + 'px',
					 'font-family': this.fontFamily,
					 'margin-top': this.lineGap + 'px',
					 'height': this.fontSize + 'px'
				 }
			}
		}
	}
</script>

<style scoped>
	.yingbing-content {
		box-sizing: border-box;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
</style>