BLi/components/wenjuan-tian.vue

<template>
	<view class="wenjuan-tian u-flex u-col-top">
		<view class="bianhao">
			{{index}}、
		</view>
		<view>
			<view class="timu-text">
				<text class="text1">填空</text>
				<block v-for="(val,key) in textlist" :key="key">
					<text class="text2">{{val.text}}</text>
					<input class="input" type="text" v-if="val.input" v-model="val.value">
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: {
				type: [Number, String],
				default: 0
			},
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				value: '',
				text: '',
				textlist: []
			}
		},
		created() {
			this.init()
		},
		watch:{
			textlist:{
				handler(e){
					this.$emit('changetian',e)
				},
				deep:true
			}
		},
		methods: {
			init() {
				this.text = this.item.quesName
				var arr = this.text.split("${input}")
				this.textlist = []
				arr.forEach((val, key) => {
					if (key == arr.length - 1) {
						this.textlist.push({
							text: val,
						})
					} else {
						this.textlist.push({
							text: val,
							value: '',
							input: true
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.wenjuan-tian {

		.bianhao {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
		}

		.timu-text {
			.input {
				width: 90rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-bottom: 2rpx solid #313131;
				display: inline-block;
				padding: 0 10rpx;
				text-align: center;
				vertical-align: top;
			}

			.text1 {
				display: inline-block;
				width: 88rpx;
				line-height: 44rpx;
				background: #167FFF;
				border-radius: 6rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 12rpx;
			}

			.text2 {
				vertical-align: top;
				line-height: 44rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
		}
	}
</style>