<template> <div class="pwdpush-box">  <h4 class="enter-password" @click="enterPwd">輸入密碼</h4>  <div class="phonenum-show" :class="pushShow?'':'write-phonenum-1000'">   <div class="write-phonenum">    <p @click.prevent="pushShow = false">使用余額支付 8864</p>    <p>支付密碼：</p>    <ul class="write-input clearfix">     <input type="tel" ref="input" maxlength="6" class="realInput" v-model="realInput" autofocus @keyup="getNum()" v-focus @keydown="delNum()">     <li v-for="disInput in disInputs"><input type="tel" maxlength="1" disabled v-model="disInput.value"></li>    </ul>    <mt-button size="large" style="margin-top:80px;" @click="goPay">確認支付</mt-button>   </div>  </div> </div></template><script>import { Field,Toast ,Indicator} from 'mint-ui';import {headerNav,bottomShow} from '../../vuex/actions/actionDoc'export default { name: 'packe', vuex: {  actions:{   headerNav,   bottomShow  } }, data(){  return{   messagepacket:false,   packets:[   ],   disInputs:[{value:''},{value:''},{value:''},{value:''},{value:''},{value:''}],   realInput:'',   pushShow:false  } }, mounted(){  this.headerNav(false)  this.bottomShow(false) }, methods:{  getNum(){   for(var i=0;i<this.realInput.length;i++){    this.disInputs[i].value=this.realInput.charAt(i)    // 表示字符串中某個位置的數字，即字符在字符串中的下標。   }  },  delNum(){   var oEvent = window.event;   if (oEvent.keyCode == 8) {    if(this.realInput.length>0){     this.disInputs[this.realInput.length-1].value=''    }   }  },  goPay(){    console.log(this.realInput)  },  enterPwd(){    this.pushShow = true;    this.$refs.input.focus()  } }}</script><style lang="less" sconed> .enter-password{  text-align: right;  color:#1D890D;  font-size: 18px;  line-height: 2;  margin-top:20px;  padding-right: 20px; } .phonenum-show{  background: rgba(0,0,0,0.6);  position: absolute;  top:0;  right:0;  bottom:0;  left:0;  z-index: -1; } .getback-title span{position: absolute;right:0;top:3px;width:15px;height:15px;display: inline-block;} .write-phonenum-1000{  top:-1000px!important; } .write-phonenum{  position: absolute;  top:50%;  margin-top:-100px;  left:0;  right:0;  bottom:0;  z-index: 2;  padding:30px 10px 0;  background: #fff; } .write-phonenum p{  font-size: 14px;  margin-left:30px;  line-height:2; } .write-phonenum p span{color: #3b90d1;} .write-input {width:312px; margin:10px auto; position: relative;} .write-input li{float: left;width:30px;height:30px; margin: 0 10px; border:1px solid #888888;} .write-input li input{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;resize: none;outline: none;border:0;width:30px;line-height: 30px;text-align: center;height: 30px;font-size:16px;} .write-phonenum .mint-button--default{background: #3b90d1;color:#fff;font-family: "微軟雅黑";font-size: 14px;width:80%;margin:10px auto;} .realInput{  /* Keyword values */  -webkit-appearance: none;  -moz-appearance: none;  -ms-appearance: none;  resize: none;  outline: none;  border: 0;  z-index: 3;  position: absolute;  width: 290px;  height: 30px;  line-height: 30px;  background: none;  display: block;  left: 50%;  margin-left: -145px;  top: 34px;  opacity: 0;  font-size: 0px;  caret-color: #fff;  color: #000;  text-indent: -5em;  font-size: 30px;  top:1px; } input[type="tel"]:disabled{background-color: #fff;}</style>