uni-app用户签名--未点完成按钮，失去焦点则恢复

需求

1，初始化显示这句话，后面带一个编辑按钮
2，当用户点击编辑按钮，按钮消失，自动聚焦输入框
3，当用户输入完成，点击页面其他地方失去焦点而未点击完成按钮，则签名恢复为上次的，编辑按钮出现
4，当用户输入完成，点击完成按钮失去焦点，则签名确定，编辑按钮出现
5，编辑按钮始终紧跟签名后面，若签名长度超过指定长度，则显示省略号，编辑按钮跟在省略号后面

我知道这叙述起来挺复杂的，其实很简单，先看效果，由于是录屏，可能不太好看懂，结合需求多看两遍：

实现

1，首先布局要想明白，不是一个输入框就搞定的事，搞一个输入框先放在签名的位置
2，输入框上面定位一个标签，放显示的签名和后面的编辑图标

<view class="userIntroduce">
	<!-- 输入框 -->
	<input class="uni-input"
	 v-model="userIntro"
	 placeholder-style="color: #dbdbdb;"
	 type="text"
	 confirm-type="done" 
	 v-if="userIntroFlag"
	 @blur="changeBlur"
	 :focus="focusFlag"
	 @confirm="confirmInput"
	/>
	<!-- 签名和编辑按钮 -->
	<view class="iconSpan"  v-if="!userIntroFlag">
		<!-- 签名 -->
		<view class="spanWord">
			{{userIntro}}
		</view>
		<!-- 编辑图标按钮   用的iconfont-->
		<text class="aliIcon" @click="changeUserInfo">
			&#xe6f8;
		</text>
	</view>
</view>



userIntro: '我很懒，什么都没留下...',
preUserIntro: ' ',
userIntroFlag: false,
focusFlag: false,



methods: {
 	 // 输入
	changeUserInfo () {
		this.userIntroFlag = true
		this.focusFlag = true
		this.preUserIntro = this.userIntro     // 先将编辑前的签名存起来
	},
	// 失去焦点
	changeBlur () {
		this.userIntroFlag = false
		this.userIntro = this.preUserIntro    // 失去焦点的时候将之前存起来的签名再次回填
	},
	// 点击完成
	confirmInput (val) {
		this.userIntro = val.detail.value     // 点击完成的时候将输入框里的值给绑定值
		this.preUserIntro = val.detail.value  // 也将这个输入框里的值给之前用来存值的变量
	}
 },







.userIntroduce{
	position: relative;
	.iconSpan{
		position: absolute;
		left: 0;
		color: rgba(255,255,255,.8);;
		top: 0rpx;
		display: flex;
		width: 100%;
		.spanWord{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 78%;
			height: 36rpx;
			position: relative;
		}
		.aliIcon{
			color: rgba(255,255,255,.7);
			z-index: 100;
			padding-left: 8rpx;
		}
	}
	input{
		width: 78%;
	}
}