（一）效果圖

（二）使用組件說明

組件使用的是uview組件，Keyboard 鍵盤和MessageInput 驗(yàn)證碼輸入兩個(gè)組件配合使用。

 <u-keyboard
        closeOnClickOverlay
        :focus="true"
        ref="uKeyboard"
        :tooltip="false"
        :random="true"
        mode="number"
        :dotDisabled="true"
        :show="popupShowPay"
        @change="onChange"
        @backspace="onBackspace"
        @close="popupShowPay = false"
      >
        <view class="qinshuru">請(qǐng)輸入支付密碼</view>
        <u-code-input v-model="payPassword" :maxlength="6" dot size="80"></u-code-input>
 </u-keyboard>

keyboard屬性：

通過mode參數(shù)定義鍵盤的類型，v-model綁定一個(gè)值為布爾值的變量，我綁定的是showKeyboard變量，控制鍵盤的彈出與收起；
mode = number (默認(rèn)值)為數(shù)字鍵盤，此時(shí)頂部工具條中間的提示文字為"數(shù)字鍵盤"
mode = car 為汽車鍵盤，此時(shí)頂部工具條中間的提示文字為"車牌號(hào)鍵盤"
mode = card 為身份證鍵盤，此時(shí)頂部工具條中間的提示文字為"身份證鍵盤"

通過tooltip參數(shù)配置是否顯示顯示頂部的工具條，默認(rèn)為true
通過tips參數(shù)修改工具條中間的提示文字
通過show-tips可以控制是否顯示工具條中間的文字
通過cancelBtn參數(shù)配置是否顯示工具條左邊的"取消"按鈕
通過confirmBtn參數(shù)配置是否顯示工具條右邊的"完成"按鈕

通過dot-enabled(默認(rèn)為true)參數(shù)配置，設(shè)置是否顯示鍵盤的點(diǎn)(“.”)按鍵，只在"mode = number"時(shí)生效，因?yàn)檐嚺铺?hào)和身份證鍵盤，用不到"."這個(gè)按鍵

設(shè)置default 屬性，內(nèi)容將會(huì)顯示鍵盤的工具條上面，可以結(jié)合MessageInput 驗(yàn)證碼輸入組件實(shí)現(xiàn)類似支付寶輸入密碼時(shí)，上方顯示輸入內(nèi)容的功能，也就是放在u-keyboard標(biāo)簽內(nèi)的view和u-message-input標(biāo)簽

keyboard事件：

輸入值是通過組件的change事件實(shí)現(xiàn)的，組件內(nèi)部每個(gè)按鍵被點(diǎn)擊的時(shí)候，組件就會(huì)發(fā)出一個(gè)change事件，回調(diào)參數(shù)為點(diǎn)擊的按鍵的值。

通過backspace事件監(jiān)聽鍵盤退格鍵的點(diǎn)擊，通過修改父組件的值實(shí)現(xiàn)退格的效果，見下方示例
注意：點(diǎn)擊退格鍵(也即刪除鍵)不會(huì)觸發(fā)change事件

（五）js代碼實(shí)現(xiàn)

數(shù)據(jù)：

data() {
		return {
			 popupShowPay: false,
			payPassword: ''//輸入的密碼
		}
	},

事件：
按鈕點(diǎn)擊顯示：文章來源地址http://www.zghlxwxcb.cn/news/detail-414987.html

async save() {
      const params = {
        price: this.price,
        blindBoxId: this.blindboxId,
        payPassword: this.payPassword,
      }
      const res = await this.$http.sales.upBlindbox(params)

      this.$refs.upDialogRef.isShowDialog = false
      this.popupShowPay = false
      this.getProductDetail()
    },

 confirmUpDown() {
      this.popupShowPay = true
      this.payPassword = ''
      this.$refs.upDialogRef.isShowDialog = false
      // return
    },
    onBackspace(e) {
      if (this.payPassword.length > 0) {
        this.payPassword = this.payPassword.substring(0, this.payPassword.length - 1)
      }
    },
    onChange(val) {
      if (this.payPassword.length < 6) {
        this.payPassword += val
      }

      if (this.payPassword.length >= 6) {
        this.finish() //封裝的結(jié)束函數(shù)，后續(xù)還有請(qǐng)求接口和判斷
      }
    },
    finish() {
      this.showKeyboard = false
      //可以放請(qǐng)求的接口及付款后的判斷等
      this.save()
    },

到了這里，關(guān)于【Uni-App】uniapp使用uview實(shí)現(xiàn)彈出鍵盤輸入密碼/驗(yàn)證碼功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！