vue3實現(xiàn)密碼輸入框效果的示例代碼

更新時間：2023年08月30日 15:12:40 作者：來福福是小可愛！

這篇文章主要為大家詳細介紹了如何利用vue3實現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下

1.效果預覽

2.實現(xiàn)思路

制作6個小的正方形div

用一個input覆蓋在6個div上

給input設置透明（透明掉input）

3.源碼

html

          <div class="footerTextStyle">請輸入6位數(shù)支付密碼</div>
          <div class="input-box">
            <div class="code-item" :class="codeValue?.length == 0 && inputFocus ? 'code-item-active' : ''">{{ codeValue[0]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 1 && inputFocus ? 'code-item-active' : ''">{{ codeValue[1]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 2 && inputFocus ? 'code-item-active' : ''">{{ codeValue[2]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 3 && inputFocus ? 'code-item-active' : ''">{{ codeValue[3]
            }}
            </div>
            <div class="code-item" :class="codeValue?.length == 4 && inputFocus ? 'code-item-active' : ''">{{ codeValue[4]
            }}
            </div>
            <div class="code-item code-item-last" :class="codeValue?.length >= 5 && inputFocus ? 'code-item-active' : ''">{{ codeValue[5]
            }}
            </div>
            <a-input class="input-code" v-model:value="codeValue" type="" @blur="codeInputBlur"
              @focus="codeInputFocus" @input="codeInputChange" maxlength="6" />
          </div>

js

// 輸入的6位密碼
const codeValue = ref([])
const inputFocus = ref(false)
// 密碼輸入框
const codeInputChange = (e : any) => {
  console.log('喵喵喵：', e.data);
  if (e) {
    // // 判斷輸入內容是否為數(shù)字
    // if ((/^\+?[0-9][0-9]*$/).test(e)) {
    //   codeValue.value = e.data
    // }
    Array.from(codeValue.value).push(e.data)
  } else {
    codeValue.value = []
  }
  console.log('咩咩：', codeValue.value);
}
// 密碼輸入框失去焦點
const codeInputBlur = () => {
  inputFocus.value = false
}
// 密碼輸入框獲取到焦點
const codeInputFocus = () => {
  inputFocus.value = true
}

css

<style lang="scss" scoped>
// 密碼輸入框
.input-box {
  position: relative;
  margin: 4px 0px 20px 0px;
  display: flex;
  width: 290px;
  height: 48px;
  background-color: transparent;
  border: none;
  color: transparent;
}
// 透明input
.input-code {
  position: absolute;
  width: 290px;
  height: 48px;
  background-color: transparent;
  border: none;
  letter-spacing: 40px;
  padding: 0px 20px;
}
.code-item {
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border: 1px solid rgba(51,51,51,0.20);
  border-right: none;
  border-radius: 5px;
}
.code-item-last{
  border-right: 1px solid rgba(51,51,51,0.20);
}
.code-item-active {
  border: 1px solid #F23026;
  box-sizing: border-box;
}
</style>

到此這篇關于vue3實現(xiàn)密碼輸入框效果的示例代碼的文章就介紹到這了,更多相關vue3密碼輸入框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: