E积分项目总结（绑卡页 第一步）

绑卡页bind-card.vue(输入框只能输入数字和字母，最多16位)

 

v-model 数据双向绑定  输入框

<input id="ipt" class="ipt-ipt" type="text" maxlength="16" name="pasww" v-model="formInline.pasw" placeholder="输入卡密码" @keyup="checkPhone()" @blur="showClean" @focus="checkPhone" />

 “绑定”按钮       isActive 是true时，添加active样式，否则不添加。

<button type="button" class="bind-btn"  @click="getStyleData" :class="{'active':isActive}">绑定</button>

　　

data里要初始化formInline

data(){
　　return{				
	// 对方手机号
	formInline:{
	　　pasw:''
	},
　　　　　// 是否显示清除icon
              isShow:false,

　　　　// 按钮效果
　　　　isActive:false,

}

},    

 

校验输入框内输入的文字，小于16位时按钮是灰色，达到16位时按钮变红，只要输入框输入文字，右侧关闭的小叉叉按钮就显示，点击就可以清空内容。

checkPhone() {
				//正则 只能输入字母和数字
				let that = this
                　　　　　　　　　that.formInline.pasw=that.formInline.pasw.replace(/[^\w]/g,'')

				var lengthPasw = this.formInline.pasw.length;
				//  输入框字符长度>=1 清除icon显示，否则不显示
				if(lengthPasw >= 1) {
					//isShow是右侧清除文字的小图标
					this.isShow = true
				} else {
					this.isShow = false
				}
				//  输入框输入够16位按钮可点击 否则不可点击
				if(lengthPasw == 16) {
					//按钮可用且变红
					this.isActive = true;

				} else {
					this.isActive = false;
				}
			},

　　

点击右侧小叉叉，清除输入框内文字，但是不失去焦点，键盘仍然停留在操作页面。

// 点击叉叉 时清除密码
		    cleanAll(){
			  // console.log('cleanAll')
		      // 清除手密码
		      this.formInline.pasw= ''
		      // 按钮置灰不可点击
		      this.isActive = false
		      // 清除按钮消失
		      this.isShow = false
		      $('.ipt-ipt').focus();
		     
		    },

　　

失去焦点时

// 失去焦点 清除icon不显示
showClean(){
    this.isShow = false
 },