| <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> |