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