快捷導(dǎo)航

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

更新時(shí)間：2023年08月30日 15:12:40 作者：來(lái)福福是小可愛(ài)！

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

注意：這是個(gè)半成品，有些問(wèn)題（input輸入框加了文字間距l(xiāng)etter-spaceing，會(huì)導(dǎo)致輸入到第6位的時(shí)候會(huì)往后竄出來(lái)一個(gè)空白框、光標(biāo)位置頁(yè)會(huì)在數(shù)字前面），建議不采用下面這種方式，用另外的（畫(huà)六個(gè)input框更方便）

1.效果預(yù)覽

2.實(shí)現(xiàn)思路

制作6個(gè)小的正方形div

用一個(gè)input覆蓋在6個(gè)div上

給input設(shè)置透明（透明掉input）

3.源碼

html

          <div class="footerTextStyle">請(qǐng)輸入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) {
    // // 判斷輸入內(nèi)容是否為數(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);
}
// 密碼輸入框失去焦點(diǎn)
const codeInputBlur = () => {
  inputFocus.value = false
}
// 密碼輸入框獲取到焦點(diǎn)
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>

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

您可能感興趣的文章: