uniapp自定义密码输入键盘-数字键盘效果demoUI方法一（整理）

<template>
  <view class="paymentCodeBox">
    <!-- 自定义键盘 -->
    <view class="password-set-page">
      <view class="setPage">
        <view class="font-size30 color222 hites align-center">请输入6位纯数字支付密码</view>
        <view class="code margin-top40 margin-bottom110">
          <view class="numFont">
            <view v-for="(item, index) in 6" :key="index">{{ password[index] && '●' || '' }}</view>
          </view>
        </view>
        <view class="nextStep margin-left30 margin-right30 font-size30 color height100 align-center" @click="nextStepClick()">下一步</view>
        <view class="keyboard">
          <button v-for="(item, index) in 9" :key="index" @click="key(index + 1)">
            <text>{{ index + 1 }}</text>
          </button>
          <button class="hide"></button>
          <button @click="key(0)">
            <text>0</text>
          </button>
          <button @click="del()">
            <image src="../static/goods/del1.png" mode="aspectFill"></image>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        // pageNum: 1,
        password: '',
      }
    },
    // 页面加载
    onLoad(e) {
      uni.hideTabBar(); //不让底部显示tab选项
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      // 点击下一步
      nextStepClick(){
        this.$.back()
      },
      // 键盘
      key(key) {
        if (this.password.length < 6) {
          this.password += key
          if (this.password.length === 6) {
            // 密码验证操作
            console.log(this.password,'37')
            // this.$.open('/trait/details');
          }
        }
      },
      del() {
        if (this.password.length > 0) {
          this.password = this.password.substring(0, this.password.length - 1)
        }
      },
      //获取列表数据
      getListData() {
        this.$.ajax("POST", "/xxxxx/xxxxx", {
          page: this.pageNum,
        }, (res) => {
          if (res) {
            if (this.pageNum == 1) {
              this.list = res.data
            } else {
              this.list = this.list.concat(res.data)
              if (res.data.length === 0) {
                this.pageNum--
              }
            }
          }
          uni.stopPullDownRefresh()
        });
      }
    },
    // 计算属性
    computed: {
    },
    // 侦听器
    watch: {
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
      // this.pageNum = 1
      // this.getListData()
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
      // this.pageNum++
      // this.getListData()
    },
  }
</script>
<style lang="scss" scoped>
  .paymentCodeBox {
    width: 100%;
    height: 100vh;
    background: #fff;
    .password-set-page {
      width: 100%;
      height: 100vh;
      .setPage{
        background: #fff;
        border-radius: 20rpx 20rpx 0px 0px;
        .hites{
          padding-top: 61rpx;
        }
      }
      .nextStep{
        background: #F21177;
        border-radius: 20rpx;
        line-height: 100rpx;
      }
      .code {
        view {
          // border: 1rpx solid #D9D9D9;
          border-radius: 8rpx;
          overflow: hidden;
          display: flex;
          width: 690rpx;
          margin: 0 auto;
          view {
            display: flex;
            align-items: center;
            justify-content: center;
            // width: 100rpx;
            height: 100rpx;
            // background: #FAFAFA;
            font-size: 60rpx;
            border: 1rpx solid #D9D9D9;
            &:not(:last-child) {
              border-right: 1rpx solid #D9D9D9;
            }
          }
        }
      }
      .keyboard {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #EEEEEE;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: calc(100vw / 3 - 1rpx);
          background: #FFFFFF;
          border-radius: 0;
          margin-top: 1rpx;
          font-size: 50rpx;
          height: 120rpx;
          &.button-hover:not(.hide) {
            background: #EEEEEE;
          }
          image {
            width: 52rpx;
            height: 38rpx;
          }
        }
      }
    }
  }
</style>