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

红太狼 2023-02-18 01:58 242阅读 0赞

## 需求 ##

![在这里插入图片描述][20200615133025760.png]

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

我知道这叙述起来挺复杂的，其实很简单，先看效果，由于是录屏，可能不太好看懂，结合需求多看两遍：  
![在这里插入图片描述][20200615133928276.gif]

## 实现 ##

> 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>
    		
    		<text class="aliIcon" @click="changeUserInfo">
    			
    		</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%;
    	}
    }

[20200615133025760.png]: https://img-blog.csdnimg.cn/20200615133025760.png
[20200615133928276.gif]: https://img-blog.csdnimg.cn/20200615133928276.gif