uni-app如何设置密码以圆点显示,同时进入该页面自动获得聚焦,自动弹出数字输入框?

uni-app如何设置密码以圆点显示,同时进入该页面自动获得聚焦,自动弹出数字输入框?
如图的密码框组件,我用微信开发者工具输入密码看不到真实值,但是用手机端预览发现
uni-app如何设置密码以圆点显示,同时进入该页面自动获得聚焦,自动弹出数字输入框?
同时请问如何设置点击”结算“按钮打开该van-dialog自动聚焦到输入框,打开数字输入键盘?仿微信支付
请问该如何调整?
以下为该组件的代码:

<template>

<view class="verification_code">

<view class="verification_code_continor">

<view

class="verification_code_item"

v-for="(item, index) in latticeNum"

:key="index"

:style="blurShowLocal && (inputValues.length === index || (inputValues.length === latticeNum && index === latticeNum - 1)) ? borderCheckStyle : borderStyle"

@tap="latticeFoc(index)"

>

<block v-if="inputValues[index]">

<view v-if="ciphertextSty == 1" class="point"></view>

<block v-else>{{ ciphertextSty == 2 ? '*' : '' }}</block>

</block>

</view>

</view>

<input type="hidden" focus :maxlength="latticeNum" class="input_info" @input="inputVal" @blur="blur" @focus="focus" />

</view>

</template>

<script>

export default {

props: {

// 输入框框框的个数

latticeNum: {

type: Number,

default: 4

},

// 未选中样式

borderStyle: {

type: String,

// default: 'border:1px solid gray;'

},

// 选中的样式

borderCheckStyle: {

type: String,

// default: 'border-bottom:1px solid gray;'

},

// input类型

inputType: {

type: String,

default: 'number'

},

// 失去焦点后是否继续显示,当前所对焦的输入框(样式)

blurShow: {

type: Boolean,

default: false

},

// 密文样式 1 圆点样式 2 星号 * 样式 默认为0 无密文

ciphertextSty: {

type: Number,

default: 1

},

// 是否允许修改/填写某一个框框的值

updateOne: {

type: Boolean,

default: false

}

},

data() {

return {

inputValues: [], //输入的值

blurShowLocal: true,

// cursor:null

};

},

mounted() {

this.blurShowLocal = this.blurShow;

// if (this.updateOne) {

// let arr = [];

// for (let i = 0; i < this.latticeNum; i++) {

// arr.push(' ');

// }

// this.inputValues = arr;

// }

},

methods: {

/**

* 输入框的值

*/

inputVal(e) {

this.inputValues = e.detail.value;

this.$emit('getInputVerification', this.inputValues);

},

// 设置验证码的值

/**

* verificationCodeValue 数组

*/

setVerificationCode(verificationCodeValue = []) {

this.inputValues = verificationCodeValue;

},

/**

* 清空验证码的值

*/

cleanVal() {

this.inputValues = [];

},

latticeFoc(index) {

},

blur() {

!this.blurShow ? (this.blurShowLocal = false) : '';

},

focus() {

!this.blurShow ? (this.blurShowLocal = true) : '';

}

}

};

</script>

<style lang="less">

.verification_code {

position: relative;

overflow: hidden;

.verification_code_continor {

display: flex;

text-align: center;

// margin-top: 20px;

// margin-left: 15px;

.verification_code_item {

width: 60px;

height: 32px;

display: flex;

align-items: center;

justify-content: center;

display: flex;

border-radius: 3px;

background-color:#E7EAEC;

}

.verification_code_item:not(:first-child) {

margin-left: 20rpx;

}

.point {

width: 10rpx;

height: 10rpx;

background-color: black;

border-radius: 200px;

}

}

.input_info {

width: 1200rpx;

height: 60rpx;

// border: 1px solid red;

position: absolute;

opacity: 0;

top: 0;

left: -700rpx;

}

}

</style>

页面vue:

<template>

<view class="makeOrder">

<view class="content">

<view class="content_item" style="margin-top: 3vw;">

<view class="title">存款产品</view>

<view class="answer">{{deposit.name}}</view>

</view>

<view class="content_item">

<view class="title">年利率</view>

<view class="answer">{{deposit.annual_rate}}%</view>

</view>

<view class="content_item">

<view class="title">身份证号</view>

<view class="answer">{{IdcardNumber}}</view>

</view>

<view class="content_item">

<view class="title">银行卡号</view>

<view class="answer">{{bankNumber}}</view>

</view>

<view class="content_item">

<view class="title">存款金额</view>

<view class="answer">{{depositMoney}}元</view>

</view>

<view class="content_item">

<view class="title">存入日期</view>

<view class="answer">{{depositDate}}</view>

</view>

<view class="content_item">

<view class="title">起息日期</view>

<view class="answer">{{interestStart}}</view>

</view>

<view class="content_item">

<view class="title">到期日期</view>

<view class="answer">{{endDay}}</view>

</view>

<view style="margin:10px;padding:10px;padding-left: 0px;margin-top:20px;">

<van-button block color="rgb(215,0,15)" @click="toPurchaseResult">

结算

</van-button>

</view>

<van-dialog

use-title-slot

use-slot

title="请输入支付密码"

:show="showDialog"

:showConfirmButton="false"

>

<view slot="title" style="margin-bottom: 15px;">

<view style="position:relative">

请输入支付密码

<van-icon name="cross" size="18px" custom-style="position:absolute;right:5%;top:5%" @click="close"/>

</view>

</view>

<view class="dialogContent" style="text-align: center;position: relative;min-height: 180px;">

<view style="font-size:16px;margin-bottom: 5px;">银行</view>

<view style="font-size:25px;font-weight:580">¥{{depositMoney}}</view>

<van-viewider/>

<view style="display:flex;margin:10px">

<view style="font-size:14px;color:#999999">银行卡号</view>

<view style="position:absolute;right:3%">{{bankNumber}}</view>

</view>

<view class="password">

<verification-code-style :latticeNum="6" @getInputVerification="getInputVerification"></verification-code-style>

</view>

</view>

</van-dialog>

</view>

</view>

</template>

<script>

import { showProductById } from '../../../api/product.js'

import * as atomServiceList from '../../../api/atomService.js'

import verificationCodeStyle from '../../../components/verification-code-style2/verification-code-style2.vue'

import { getNext } from '../../../api/graph.js'

export default{

components: {

verificationCodeStyle

},

data(){

return{

current:'',

productId:'',

deposit:[],

IdcardNumber:'',

bankNumber:'',

depositMoney:'',

depositDate:'',//存入日期

interestStart:'',//起息日期

endDay:'', //到期日期

showDialog:false,

password:''

}

},

onLoad(option){

this.current=option.id;

this.productId=option.productId

this.depositMoney=option.money;

this.bankNumber=this.$store.getters.cardNumber.replace(/^(\d{4})\d+(\d{4})$/, "$1****$2")

this.IdcardNumber=this.$store.getters.IdcardNumber.replace(/^(.{4})(?:\d+)(.{4})$/,"$1******$2");

showProductById(this.productId).then(res=>{

this.deposit = res.data;

})

atomServiceList.makeOrder(this.productId,this.depositMoney).then(res=>{

this.interestStart=res.data.interestStart.substr(0,10);

this.endDay=res.data.endDay.substr(0,10);

this.depositDate=res.data.createdTime.substr(0,10);

console.log("生成订单完")

})

getNext(this.productId,this.current,'#').then(res=>{

this.current=res.data.current

if(res.data.name==='stockLock'){

atomServiceList.stockLock(this.productId,this.depositMoney).then(res=>{

console.log("库存锁定完")

})

}

})

},

onBackPress(e) {

console.log(e);

if(e.from == 'backbutton'){

this.$utils.showModal('提示','房型尚未保存,确认退出吗?',true,'继续编辑','确定').then(()=>{

console.log('确定')

uni.navigateBack({

delta:1

})

}).catch(()=>{

console.log('继续编辑')

})

return true;//阻止默认返回行为

}

},

methods:{

getInputVerification(e) {

this.password=e

console.log('getInputVerification的password:',this.password)

},

close(){

this.showDialog=false

},

toPurchaseResult(){

this.showDialog=true

console.log('this.password:',this.password)

// getNext(this.productId,this.current,'#').then(res=>{

// if(res.data.name==='payMoney'){

// this.current=res.data.current

// atomServiceList.payMoney(this.password,this.depositMoney).then(res=>{

// console.log("payMoney.res:",res)

// console.log('付钱接口完')

// })

// getNext(this.productId,this.current,'#').then(res=>{

// if(res.data.name==='stockUpdate'){

// atomServiceList.stockUpdate(this.productId,this.depositMoney).then(res=>{

// console.log("库存更新完")

// })

// }

// })

// // uni.redirectTo({

// // url: `purchase_result?item=${encodeURIComponent(JSON.stringify(this.deposit))}&money=${this.depositMoney}&id=${rea.data.current}`,

// // })

// }

// })

}

}

}

</script>

<style>

.password{

width: 500rpx;

margin: 50rpx auto;

}

.content{

padding: 0 4vw;

}

.content_item{

margin-top:3vw;

padding-bottom:3vw;

display: flex;

position: relative;

border-bottom: 1px solid #e7eaec !important;

}

.answer{

color: #B0B0B0;

position: absolute;

right: 1vw;

max-width:65%;

text-align: right;

}

</style>

请赐教,不胜感激。

以上是 uni-app如何设置密码以圆点显示,同时进入该页面自动获得聚焦,自动弹出数字输入框? 的全部内容, 来源链接: utcz.com/p/937204.html

回到顶部