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

需求

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

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

实现

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

	
	
	
	
		
		
			{{userIntro}}
		
		
		
			
		
	




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%;
	}
}