写一个类似支付宝/微信的密码输入框，找了很久，找到了一段代码，简单修改下
<!--四位验证码输入框组件--><template><view class="security-code-wrap"><label for="code"><ul class="security-code-container"><li class="field-wrap" v-for="(item, index) in number" :key="index"><i class="char-field">{{value[index] || placeholder }}</i></li></ul></label><inputref="inps"class="input-code"@input="handleInput($event)"v-model="value"id="code"name="code":type="inputType":maxlength="number"autocorrect="off"autocomplete="off"autocapitalize="off"/></view></template><script>export default {name: "SecurityCode",// component propertiesprops: {inputType:{type: String,default:'number',},number: {type: Number,default: 4,},placeholder: {type: String,default: "-",},},// variablesdata() {return {value: "",};},onLoad(){this.value=''},methods: {hideKeyboard() {// 输入完成隐藏键盘document.activeElement.blur(); // ios隐藏键盘this.$refs.inps.blur(); // android隐藏键盘},handleSubmit() {this.$emit("input", this.value);},handleInput(e) {console.log(e,'这个是键盘',this.number);// this.$refs.inps.value = this.value;this.value=e.detail.value;if (this.value.length >= this.number) {// this.hideKeyboard();console.log('------de--e');}this.handleSubmit();},},};</script><style scoped >@import './index.css';</style>
输入框样式
.security-code-wrap {overflow: hidden;}.security-code-container {margin: 0;padding: 0;display: flex;justify-content: space-between;}.security-code-container .field-wrap {list-style: none;display: block;width: 76rpx;height: 76rpx;line-height: 76rpx;text-align: center;font-size: 36rpx;background-color: #e6dccf;margin: 2px;color: #999999;border-radius: 4rpx;}.security-code-container .field-wrap .char-field {font-style: normal;}.input-code {position: absolute;left: -9999px;top: -99999px;width: 0;height: 0;opacity: 0;overflow: visible;z-index: -1;}
