微信小程序：验证码/密码输入框

产品需求，进入直播会议前校验需不要需要输入密码，输入密码样式仿造微信支付样式，如下是效果图

一、效果图如下：

二、代码部分：

wxml：

<view class='content'>
  <!-- 输入框（表格） -->
  <view class='{{(interval?"pay_number":"pay_number_interval")}}  {{focus_class?"get_focus":""}}' catchtap="set_focus" style='width:{{width}};height:{{height}};'>
    <view class='{{focus_class?(interval?"get_focus_dot":"get_focus_dot_interval"):(interval?"password_dot":"password_dot_interval")}} {{index==0?"noBorder":""}}' wx:for="{{value_num}}" wx:key="index">
      <view wx:if="{{(value_length==item-1)&&focus_class}}" class="cursor"></view>
      <view wx:if="{{value_length>=item}}" class="{{see?'':'dot'}}">{{see?val_arr[index]:""}}</view>
    </view>
  </view>
   <!-- 输入框（隐藏） -->
    <input value="{{input_value}}" focus="{{get_focus}}" maxlength="6" type="number" class='input_container' placeholder="" bindinput="get_value" bindfocus="get_focus" bindblur="blur" />
</view>

js:

Component({
	// 组件属性
	properties: {
	  //输入框密码位数
	  value_length: {
		type: Number,
		value: 0,
		// 监听输入框密码变化
		observer: function(newVal, oldVal) {
		  let that = this;
		  let input_value = that.data.input_value
		  that.triggerEvent('valueNow', input_value)
		  // 当输入框的值等于6时（发起支付等...）
		  if (newVal == 6) {
			// 设定延时事件处理
			setTimeout(function() {
			  // 引用组件页面的自定义函数(前一个参数为函数，后一个为传递给父页面的值)
			  that.triggerEvent('valueSix', input_value)
			  // 当没有
			  if (!that.data.isNext) {
				// 回到初始样式
				that.setData({
				  get_focus: false,
				  value_length: 0,
				  input_value: ""
				});
			  }
   
			}, 100)
   
		  }
		}
	  },
   
	  // 是否显示间隔输入框
	  interval: {
		type: Boolean,
		value: true,
		observer: function(newVal, oldVal) {
   
		}
	  },
   
	  // 是否有下一步按钮（如果有则当输入6位数字时不自动清空内容）
	  isNext: {
		type: Boolean,
		value: false,
		observer: function(newVal, oldVal) {
   
		}
	  },
   
	  //输入框聚焦状态
	  get_focus: {
		type: Boolean,
		value: true,
		observer: function(newVal, oldVal) {
   
		}
	  },
	  //输入框初始内容
	  input_value: {
		type: String,
		value: "",
		observer: function(newVal, oldVal) {
   
		}
	  },
	//   是否清除内容
	isClear: {
		type: Boolean,
		value: false,
		observer: function(newVal, oldVal) {
			if(newVal) {
				this.setData({
					value_length: 0,
					input_value: ""
				})
			}
		}
	  },
	  //输入框聚焦样式 
	  focus_class: {
		type: Boolean,
		value: false,
		observer: function(newVal, oldVal) {
   
		}
	  },
	  //输入框格子数
	  value_num: {
		type: Array,
		value: [1, 2, 3, 4, 5, 6],
		observer: function(newVal, oldVal) {
   
		}
	  },
	  //输入框高度
	  height: {
		type: String,
		value: "98rpx",
		observer: function(newVal, oldVal) {
   
		}
	  },
	  //输入框宽度
	  width: {
		type: String,
		value: "604rpx",
		observer: function(newVal, oldVal) {
   
		}
	  },
	  //是否明文展示
	  see: {
		type: Boolean,
		value: false,
		observer: function(newVal, oldVal) {
   
		}
	  },
	},

	// 组件方法
	methods: {
	  // 获得焦点时
	  get_focus() {
		let that = this;
		that.setData({
		  focus_class: true
		})
	  },
   
	  // 失去焦点时
	  blur() {
		let that = this;
		that.setData({
		  focus_class: false
		})
	  },
   
	  // 点击聚焦
	  set_focus() {
		let that = this;
		that.setData({
		  get_focus: true
		})
	  },
   
	  // 获取输入框的值
	  get_value(data) {
		let that = this;
		// 设置空数组用于明文展现
		let val_arr = [];
		// 获取当前输入框的值
		let now_val = data.detail.value
		// 遍历把每个数字加入数组
		for (let i = 0; i < 6; i++) {
		  val_arr.push(now_val.substr(i, 1))
		}
		// 获取输入框值的长度
		let value_length = data.detail.value.length;
		// 更新数据
		that.triggerEvent('inputClick', now_val)
		that.setData({
		  value_length: value_length,
		  val_arr: val_arr,
		  input_value: now_val
		});
	  },
	}
})

wxss:

/* 支付密码框 */
.pay_number {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  border: 1px solid #cfd4d3;
  /* border-radius:10rpx; */
}
.pay_number_interval {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/* 第一个格子输入框 */
.content .noBorder {
  /* border-left: none; */
  text-align: center !important;
}
/* 支付密码框聚焦的时候 */
.get_focus {
  border-color: #4782FF;
}
/* 单个格式样式 */
.password_dot {
  flex: 1;
  border-left: 1px solid #cfd4d3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.password_dot_interval {
  flex: 1;
  border: 1px solid #cfd4d3;
  margin:0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* 单个格式样式（聚焦的时候） */
.get_focus_dot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.get_focus_dot_interval {
  flex: 1;
  border: 1px solid #ccc;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* 模拟光标 */
.cursor {
  width: 1px;
  height: 15px;
  background-color: #ccc;
  animation: focus 0.7s infinite;
}
/* 光标动画 */
@keyframes focus {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* 格式中的点 */
.dot {
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
}
/* 输入框 */
.input_container {
  /* height: 0;
  width: 0;
  min-height: 0; */
  position: relative;
  text-indent: -999em;
  left: -100%;
}

父组件调用

js:

// 输入框组件对象
	inputData: {
		// 是否显示清除
		isClear: false,
		// 初始内容
		input_value: "", 
		// 密码位数
		value_length: 6, 
		// 是否显示下一步的按钮
		isNext: true, 
		// 聚焦状态 
		get_focus: true, 
		// 聚焦样式
		focus_class: true, 
		// 格子数
		value_num: [1, 2, 3, 4, 5, 6], 
		// 高度
		height: "80rpx", 
		// 宽度
		width: "700rpx", 
		// 是否明文展示
		see: true, 
		// 是否显示间隔格子
		interval: false, 
	},

wxml:

<checkInput
	bindinputClick="inputClick" 
	input_value="{{inputData.input_value}}" 
	value_length="{{inputData.value_length}}" 
	isNext="{{inputData.isNext}}" 
	isClear="{{inputData.isClear}}"
	get_focus="{{inputData.get_focus}}" 
	focus_class="{{inputData.focus_class}}" 
	value_num="{{inputData.value_num}}"
	height="{{inputData.height}}" 
	width="{{inputData.width}}" 
	see="{{inputData.see}}" 
	interval="{{inputData.interval}}">
</checkSix>