<div class="auto-resize-input-container">
	<span class="measure-span">{{ searchText }}</span>
	<input v-model="searchText" @confirm="handleConfirm" type="text" class="auto-resize-input" :style="{ width: inputWidth + 'px' }" placeholder="按关键词搜索" placeholder-style="color: #C9CED4;" />
</div>

watch: {
	searchText() {
		this.$nextTick(() => {
			const query = uni.createSelectorQuery().in(this);
			query.select('.measure-span').boundingClientRect((rect) => {
			 if (rect) {
				this.inputWidth = Math.max(rect.width + 10, 100);
				}
			}).exec();
		});
	}
},

.auto-resize-input-container {
	position: relative;
	display: flex;
	align-items: center;

	.auto-resize-input {
		display: inline-block;
		white-space: pre;
		margin-left: 8rpx;
		border: unset;
		padding: 0;
		font-size: 28rpx !important;
		color: #1A1F25 !important;
		line-height: 22px !important;
	}
}

.measure-span {
	visibility: hidden;
	position: absolute;
	white-space: pre;
	padding: 0 5px;
	font: inherit;
}