微信小程序实现自定义组件之数字键盘

组件

<!--components/keyboard/keyboard.wxml-->
<!-- 参考：https://developers.weixin.qq.com/community/develop/article/doc/00008c5559c25887996a467e95ec13 -->
<view class="keyboard" id="keyboard" hidden="{{!show}}" style="--width: {{width}}">
    <view class="input" wx:if="{{showInput}}">
        <view class="value {{showCursor ? 'flicker':''}}">{{value}}</view>
    </view>
    <view class="keyboard-box">
        <view class="number">
            <view class="key" data-text="1" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">1</view>
            <view class="key" data-text="2" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">2</view>
            <view class="key" data-text="3" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">3</view>
            <view class="key" data-text="4" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">4</view>
            <view class="key" data-text="5" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">5</view>
            <view class="key" data-text="6" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">6</view>
            <view class="key" data-text="7" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">7</view>
            <view class="key" data-text="8" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">8</view>
            <view class="key" data-text="9" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">9</view>
            <view class="key keyzero" data-text="0" bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">0</view>
            <view class="key keypoint" data-text="." bind:tap="tapNum" hover-class="keyclick" hover-stay-time="100">.</view>
        </view>
        <view class="fn-key">
            <view class="key" bind:tap="tapBackspace" hover-class="keyclick" hover-stay-time="100">后退</view>
            <view class="key" bind:tap="tapClear" hover-class="keyclick" hover-stay-time="100">清除</view>
            <view class="key keyenter" bindtap="showKeyboard" hover-class="keyclick" hover-stay-time="100">完成</view>
        </view>
    </view>
    <view class="overlay" bindtap="showKeyboard"></view>
</view>

// components/keyboard/keyboard.ts
Component({
    properties: {
        show: {
            type: Boolean,
            value: false
        },
        width: {
            type: String,
            value: '750rpx',
        },
        showInput: {
            type: Boolean,
            value: true
        },
        max: {
            type: Number,
            value: 999999
        },
        decimalMax: {
            type: Number,
            value: 2
        }
    },
    data: {
        value: '',
        showCursor: true,
    },
    observers: {
        'value': function (value) {
            var showCursor = true;
            // 小数位大于三位
            if (this.getDecimalSize(value) >= this.data.decimalMax) {
                showCursor = false
            }
            // 超出限制
            if (Number(value) >= this.data.max) {
                showCursor = false
            }
            // 监听value 设置光标显示隐藏
            this.setData({ showCursor: showCursor })
            // 实时监听value值
            this.triggerEvent('value', this.data.value)
        }
    },
    methods: {
        // 按键
        tapNum(event) {
            wx.vibrateShort({ type: "light" })
            var value = this.data.value;
            var text = event.currentTarget.dataset.text;
            // 最大限制
            if (Number(value) >= this.data.max) {
                wx.showToast({
                    title: `超出限制${this.data.max}`,
                    icon: "none"
                })
                return
            }
            // 点判断
            if (text == '.') {
                if (value) {
                    if (value.indexOf('.') <= -1) {
                        this.setData({ value: this.data.value + text })
                    }
                } else {
                    this.setData({ value: '0.' })
                }
                return
            }
            // 小数位判断
            if (this.getDecimalSize(value) >= this.data.decimalMax) {
                wx.showToast({
                    title: `最多保留${this.data.decimalMax}位小数`,
                    icon: "none"
                })
                return
            }
            this.setData({ value: this.data.value + text })
        },
        // 删除
        tapBackspace() {
            wx.vibrateShort({ type: "light" })
            var value = this.data.value
            value = value.slice(0, -1)
            this.setData({ value: value })
        },
        // 清空
        tapClear() {
            wx.vibrateShort({ type: "light" })
            this.setData({ value: '' })
        },
        // 输入完成
        showKeyboard() {
            wx.vibrateShort({ type: "light" })
            this.triggerEvent('over', { value: Number(this.data.value) })
        },
        // 小数位位数
        getDecimalSize(value: String) {
            if (value.indexOf('.') >= 0) {
                var pointAfter = value.substr(value.indexOf('.') + 1)
                return pointAfter.length;
            }
            return 0;
        }
    },
})

/* components/keyboard/keyboard.wxss */
@import "../../app.less";

.keyboard {
    width: var(--width);
    position: relative;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 120;
    background-color: #f7f7f7;
    // background-color: #9e9e9e;
    padding-top: 12px;
    border-radius: 5px;

    .input {
        width: calc(100% - 8px * 2 - 5px * 2);
        height: 55px;
        line-height: $height;
        background-color: #ffffff;
        border-radius: 5px;
        margin: 0 auto;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        position: relative;
        display: flex;

        .value {
            display: inline-block;
            margin: 0 auto;
        }

        .flicker::after {
            content: "";
            width: 3px;
            height: 25px;
            margin-left: 2px;
            background-color: #474747;
            position: absolute;
            top: 50%;
            right: -3px;
            transform: translateY(-50%);
            animation: flicker 1s ease infinite;
        }
    }

    .keyboard-box {
        width: 100%;
        display: flex;
        padding: 8px;
        padding-top: 5px;
        --keyGap: 8px;
        --keyWidth: calc((var(--width) - $padding * 2) / 4 - var(--keyGap));
        --keyHeight: 50px;

        .number {
            width: calc(100% / 4 * 3);
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;

            .keyzero {
                flex: 1;
            }


            .overlay {
                z-index: 90;
                background-color: rgba(0, 0, 0, 0);
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        }

        .key {
            width: var(--keyWidth);
            height: var(--keyHeight);
            line-height: $height;
            font-size: 22px;
            font-weight: bold;
            box-sizing: border-box;
            background-color: #FFF;
            border-radius: 5px;
            margin: calc(var(--keyGap) / 2);
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .keyclick {
            background-color: darken(#ffffff, 15%);
        }


        .fn-key {
            width: calc(100% / 4 * 1);
            height: 100%;
            display: flex;
            flex-direction: column;

            .key {
                font-size: 16px;
            }


            .keyenter {
                height: calc(var(--keyHeight) * 2 + var(--keyGap));
                line-height: $height;
                background: #FFF;
                text-align: center;
                background-color: @themeColor;
                color: #ffffff;
            }

            .keyenter.keyclick {
                background-color: desaturate(#3463fd, 20%);
            }
        }

        .fn-hide {
            display: none;
        }
    }
}

@keyframes flicker {
    0% {
        opacity: 1;
        height: 25px;
    }

    100% {
        opacity: 0;
        height: 0;
    }
}

使用

{
    "usingComponents": {
        "keyboard": "/components/keyboard/keyboard"
    }
}

 <keyboard max="9999" showInput="{{true}}" show="{{showTransfer}}" bind:value="onInputValue" bind:value="onInputOver"></keyboard>

    // 获取实时输入值
    onInputValue(e) {
        console.log(e.detail);
    },
    // 点击完成获取输入值
    onInputOver(e) {
        console.log(e.detail.value);
    },

本文链接： https://jianz.xyz/index.php/archives/450/