【工作日常】小程序自定义带光标的键盘

写文章背后的心酸，被一个公司弱鸡领导整的，头部感觉有很大的压力，没法再做较为复杂的工作，可能出错率会很高，于是写文章放松一下。没准以后这代码能复用起来，也是有好处的，可以直接减少开发成本呢。为了防止被整，下次还是要低调一点。

第一步：定义组件

<bird-keyboard v-model="result"  @change="change" @confirm="confirm" placeholder="请输入实际买单金额" />

第二步：引入组件

import BirdKeyboard from "@/components/bird-password-input/bird-password-input"
components: {
     BirdKeyboard
}

第三步：bird-password-input.vue文件

<script>
import Keyboard from './bird-keyboard.vue';

export default {
  name: 'BirdPasswordInput',
  components: {
      Keyboard
  },
  data() {
    return {
      result: [],
      activeIndex: 0,
      show: true
    };
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入',
    }
  },
  model: {
    event: 'update:value',
    prop: 'value',
  },
  methods: {
    change(row) {
        let that = this
        
        this.activeIndex = row.length
        this.result = row
        
        this.$emit("change", this.result)
    },
    showKeyboard() {
      this.visible = true;
    },
    confirm() {
        this.$emit("confirm")
    }
  },
 
};
</script>

<template>
  <view @click.stop>
    
    
    
    <view class="app-input-wrap" :class="{'active':visible}">
      <view class="placeholder" v-if="result.length === 0">{{ placeholder }}</view>
      <view class="input-wrap" ref="input" @click="showKeyboard">
        <view
            class="input-span"
            :class="{ active: activeIndex === 0 }"
            @click="activeIndex = 0"
        ></view>
        <view
            v-for="(item, index) of result"
            :key="'span' + index"
            class="input-span"
            :class="{ active: index + 1 === activeIndex }"
            @click="activeIndex = index + 1"
        >
          {{ item }}
        </view>
        <view class="grow-span" @click="activeIndex = result.length"></view>
      </view>
      <view class="global-h5-bottom-dialog" :class="{ show: visible }" style="background-color: #f2f3f5">
       
        
        <Keyboard
            :show="show"
            confirmText="确定"
            @change="change"
            @confirm="confirm"
            type="price"
        />
      </view>
    </view>
  </view>
</template>

<style scoped>
.global-h5-bottom-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
}

.app-input-label {
  margin-bottom: 20rpx;
  color: rgba(0, 0, 0, 0.9);
}

.app-input-wrap {
  height: 88rpx;
  position: relative;
}

.app-input-wrap.active {
  border-color: #C63427;
}

.app-input-wrap .placeholder {
  flex: 1;
  color: #ccc;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 88rpx;
  padding-left: 15rpx;
}

.app-input-wrap .eye-icon {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.input-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 10rpx;
  background-color: transparent;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.input-wrap .input-span {
  position: relative;
  font-size: 44rpx;
  font-weight: bold;
}

.input-wrap .input-span:first-child {
  width: 10rpx;
  height: 100%;
}

.input-wrap .input-span.active:after {
  animation: cursor-opacity 1.3s linear infinite;
}

.input-wrap .input-span:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rpx;
  content: '';
  display: block;
  width: 4rpx;
  height: 50rpx;
  border-radius: 5px;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
}

.input-wrap .grow-span {
  height: 100%;
  flex: 1;
}

@keyframes cursor-opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

</style>

第四步：bird-keyboard.vue

<template>
    <view class="keyboard " :class="{'show':show,'dark':dark}">
        <view class="keyboard-content">
            
            <view class="keyboard-content-left">
                <view class="keyboard-content-left-item" v-for="item in KeyboardNumber"  :index="item" @click="_setValue(item)" >
                    <view class="keyboard-content-left-item-cell hover">
                        {{item}}
                    </view>
                </view>
                <view class="keyboard-content-left-item" v-if="isDecimal" @click="_setValue('.')">
                    <view class="keyboard-content-left-item-cell hover" >.</view>
                </view>
            </view>
            
            <view class="keyboard-content-right">
                <view class="keyboard-content-right-item" @click="_setValue('delete')">
                    <view class="keyboard-content-right-item-cell hover">
                        <image class="icon" v-if="!dark" src="../../static/mono-keyboard/backspace.png" mode="aspectFill"></image>
                        <image class="icon" v-else src="../../static/mono-keyboard/backspace_dark.png" mode="aspectFill"></image>
                    </view> 
                </view>
                <view class="keyboard-content-right-item" @click="confirm">
                    <view class="keyboard-content-right-item-confirm" :class="{'disable':!money,'hover':money}" :style="{'background-color':btnColor }">{{ confirmText }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        name:'monokeyboard', 
        props:{
            show:{
                default: false,
                type: Boolean
            },
            dark:{
                default: false,
                type: Boolean
            },
            btnColor:{
                default: '#07C160',
                type:String
            },
            confirmText:{
                default: '',
                type: String
            },
            isDecimal:{
                default:true,
                type: Boolean
            },
            value:{
                default: '',
                type: [Number,String]
            },
            type: {
                default: 'default',
                type: String
            }
        },
        data(){
            return {
                KeyboardNumber: [1,2,3,4,5,6,7,8,9,0],
                money: ''
            }
        },
        created(){
            this.money += this.value
        },
        computed:{
            
        },
        methods:{
            _setValue:function(e){
                try {
                    switch(e){
                        case '.':
                            if(this.money.indexOf('.') > -1) break
                            if(this.money==''){
                                this.money = '0.' 
                            }else{
                                this.money += e.toString()
                            }
                            break
                        case 'delete':
                            if(this.money.length > 0){
                                this.money = this.money.substr(0,this.money.length-1)
                            }
                            break
                        default:
                            if(this.validatePrice(e)) {
                                this.money +=e.toString()
                            }
                    }
                    
                    let price = this.money || "";
                    if (price.indexOf(".") == 0) {
                        price = price.replace(/[^$#$]/g, "0.");
                        price = price.replace(/\.{2,}/g, ".");
                    } 
                    price = price.match(/^\d*(\.?\d{0,2})/g)[0] || "";
                    this.money = price;
                    
                    this.$emit("change",this.money)
                } catch(e) {
                    this.money = "";
                }
            },
            validatePrice:function(key){
                var value = this.money, checkMoney = this.money.split("")
                if (checkMoney.indexOf(".") > -1 && key == "." || checkMoney.length === 0 && key == "." || checkMoney[0] == "0" && checkMoney.length === 1 && key != "." || (value + key).split(".")[1] && (value + key).split(".")[1].length > 2) {
                    return false
                }
                return true
            },
            checkPrice:function(value, type){
                var reg = /^[+-]?[1-9]?[0-9]*\.[0-9]*$/, reg1 = /^[0-9]*[1-9][0-9]*$/;
                if (!reg1.test(value) && !reg.test(value) && value !== "0") {
                    return false
                } else if (reg.test(value) && value.split(".")[1].length > 2 || value * 1 < .01 && type == 2 || reg.test(value) && value.split(".")[1].length == 0) {
                    return false
                }
                return true
            },
            confirm:function(){
                if(this.money.length>0 && this.checkPrice(this.money, 2)) {
                    this.$emit("confirm",this.money)
                }
                
            }
        }
    }
</script>
<style lang="less" scoped>
    .dark{
        background-color: #1E1E1E !important;
        .keyboard-content-left-item-cell{
            background-color: #2c2c2c !important;
            color: rgba(255,255,255,0.6);
        }
        .keyboard-content-right-item-cell{
            background-color: #2c2c2c !important;
        }
        .keyboard-content-left-item-cell:active{
            background-color: rgba(255,255,255,0.2) !important;    
        }
        .keyboard-content-right-item-cell:active{
            background-color: rgba(255,255,255,0.2) !important;    
        }
    }
    .keyboard{
        position:fixed;
        left: 0;
        transform: translateY(100%);
        transition: all 0.3s ease;
        bottom: 0;
        background-color: #F7F7F7;
        width: 100%;
        padding: 20rpx 0 40rpx 0;
        box-sizing: border-box;
        z-index: 99999;
        .keyboard-content{
            display: flex;
            .keyboard-content-left{
                width: 75%;
                display: flex;
                flex-wrap: wrap;
                .keyboard-content-left-item{
                    flex-basis: 33%;
                    flex-grow: 1;
                    padding: 0 0 15rpx 15rpx;
                    box-sizing: border-box;
                    .keyboard-content-left-item-cell{
                        background-color: #ffffff;
                        border-radius: 8rpx;
                        text-align: center;
                        font-size: 46rpx;
                        line-height: 92rpx;
                        font-weight: 500;
                    }
                    .keyboard-content-left-item-cell:active{
                        background-color: rgba(0,0,0,0.1);    
                    }
                }
                .keyboard-content-left-item:nth-child(10){
                    flex-basis: 66%;
                    flex-grow:1;
                }
            }
            .keyboard-content-right{
                width: 25%;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                .keyboard-content-right-item{
                    width: 100%;
                    padding: 0 15rpx 15rpx 15rpx;
                    box-sizing: border-box;
                    
                    .keyboard-content-right-item-cell{
                        border-radius: 8rpx;
                        background-color: #ffffff;
                        height: 92rpx;
                        line-height: 92rpx;
                        padding: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                        image{
                            height: 60%;
                            width: 40%;                            
                        }
                    }
                    .keyboard-content-right-item-cell:active{
                        background-color: rgba(0,0,0,0.1);    
                    }
                }
                .keyboard-content-right-item:nth-child(2){
                    flex:1;
                    .keyboard-content-right-item-confirm{
                        background-color: #07C160;
                        opacity: 1;
                        color: rgba(255,255,255,0.8);
                        height: 100%;
                        border-radius: 8rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .disable{
                        opacity: 0.4;
                    }
                    .hover:active{
                        //background-color: rgba(8,165,82,1);    
                        opacity: 0.8;
                    }
                }
            }
        }
    }
    .show {
            transition: all 0.3s ease;
            transform: translateY(0%) !important;
        }
</style>

by: 2023年10月13日