自定义键盘

程序中需要使用自己定义的键盘，通过以下代码可以实现：

<template>
    <view class="keyboard tarKeyboard">
        <view :class="'tarKeyboard type type' + type">
            <view
                v-if="isClose"
                class="keyboardClose"
                @click.stop="click({prop:'submit'})"
            >x</view>
            <view
                v-for="(item, index) in type===26 ? items26 : type===15 ? items15 : items9"
                :key="index"
                :style="{background: item.bg || '#484848'}"
                :class="[item===activeData?'active tarKeyboard':'tarKeyboard', item.class]"
                @click.stop="click(item)"
            >
                <view
                    v-if="typeof item !== 'object'"
                    :class="['tarKeyboard', (typeof item === 'number' ? 'spanNumber' : '')]"
                >
                    {{ item }}
                </view>
                <view
                    v-if="item.text"
                    class="tarKeyboard"
                >
                    {{ item.text }}
                </view>
				<image
					v-if="item.icon"
					class="tarKeyboard btn_icon"
					:src="item.icon"
				>
				</image>

            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'keyboard',
    props: [
        'type', //按钮类型
        'isClose', //是否有关闭按钮
		 'wordsPage',
    ],
    data() {
        return {
            activeData: '',
            words: '',
            items26: [
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                0,
                'Q',
                'W',
                'E',
                'R',
                'T',
                'Y',
                'U',
                'I',
                'O',
                'P',
                'A',
                'S',
                'D',
                'F',
                'G',
                'H',
                'J',
                'K',
                'L',
                'Z',
                { icon: '../../static/image/failback.png', bg: '#03a1ff', prop: 'delete' }, // 删除
                { icon: '../../static/image/cap.png', prop: 'change' }, // 大小写切换
                'X',
                'C',
                'V',
                'B',
                'N',
                'M',
                { text: '清空', prop: 'clear' }, // 清空
                { text: '确定', bg: '#03a1ff', prop: 'submit' } // 确定
            ],
            items15: [
                1,
                2,
                3,
                // { text: '退格', prop: 'clear' }, // 退格
                { icon: '../../static/image/failback.png', bg: '#03a1ff', prop: 'delete' }, // 删除
                4,
                5,
                6,
                { text: '清空', prop: 'clear' }, // 清空
                7,
                8,
                9,
                '*',
                '.',
                0,
                { text: '确定', bg: '#03a1ff', prop: 'submit', class: 'itemW2' } // 确定
            ],
            items9: [
                1,
                2,
                3,
                { icon: '../../static/image/failback.png', bg: '#03a1ff', prop: 'delete' }, // 删除
                4,
                5,
                6,
                0,
                7,
                8,
                9,
                { text: '确定', bg: '#03a1ff', prop: 'submit' } // 确定
            ]
        };
    },
    created() {
            this.items26 = [
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                0,
                'Q',
                'W',
                'E',
                'R',
                'T',
                'Y',
                'U',
                'I',
                'O',
                'P',
                'A',
                'S',
                'D',
                'F',
                'G',
                'H',
                'J',
                'K',
                'L',
                { icon: '../../static/image/failback.png', bg: '#03a1ff', prop: 'delete' }, // 删除
                { icon: '../../static/image/cap.png', prop: 'change' }, // 大小写切换
                'Z',
                'X',
                'C',
                'V',
                'B',
                'N',
                'M',
                { text: '清空', prop: 'clear' }, // 清空
                { text: '确定', bg: '#03a1ff', prop: 'submit' } // 确定
            ];
			 this.words = this.wordsPage
    },
    methods: {
        // //按钮处理
        click(item) {
            if (typeof item === 'object') {
                if (item.prop === 'change') {
                    // 大小写切换
                    for (let i = 0; i < this.items26.length; i++) {
                        if (typeof this.items26[i] === 'string') {
                            const newWord = this.letterUpperAndLower(this.items26[i]);
                            this.$set(this.items26, i, newWord);
                        }
                    }
                } else if (item.prop === 'delete') {
                    // 删除
                    if (this.words.length) {
                        this.words = this.words.substring(0, this.words.length - 1);
                        this.$emit('keyDown', this.words);
                    }
                } else if (item.prop === 'clear') {
                    // 清空
                    this.words = '';
                    this.$emit('keyDown', this.words);
                } else if (item.prop === 'submit') {
                    // 确定
                    this.$emit('submit');
                }
            } else {
                this.words += item;
                this.$emit('keyDown', this.words);
            }
            this.activeData = item;
        },
        letterUpperAndLower(letter) {
            let reg1 = /[A-Z]/;
            let reg2 = /[a-z]/;
            let result = '';
            // 是大写字母
            if (reg1.test(letter)) {
                result = letter.toLowerCase();
            } else if (reg2.test(letter)) {
                // 是小写字母
                result = letter.toUpperCase();
            }
            return result;
        }
    }
};
</script>

<style lang="scss" scoped>
.keyboard {
    position: fixed;
    bottom: 0;
    font-size: 36rpx;
    background: #333;
    color: #fff;
    text-align: center;
    left: 0;
	z-index: 99999;
    .type {
        margin: 0 auto;
        > view,image {
            display: inline-block;
            border-radius: 20rpx;
            .btn_icon {
                vertical-align: middle;
                margin-bottom: 16rpx;
            }
        }
    }
    .keyboardClose {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 60rpx !important;
    }
    .type9,
    .type15 {
        > view,image {
            margin: 40rpx;
        }
    }
    .active {
        box-shadow: 0px 0px 28rpx #fff;
    }
}
.fresh {
    background: none;
    position: relative;
    .type > div {
        border-radius: 80px;
        background: #fff !important;
        color: #000 !important;
    }
}
@media screen and (orientation: portrait) {
    .keyboard .keyboardClose {
        top: -24px;
        right: -24px;
    }
    .keyboard {
        width: 100%;
    }
    .keyboard .type26 {
        width: 1000px;
    }
    .type9,
    .type15 {
        width: 480px;
    }

    .keyboard .type.type9 {
        font-weight: bolder;
        > view,image {
            width: 90px;
            height: 90px;
            line-height: 90px;
            overflow: hidden;
        }
        .spanNumber {
            font-size: 36rpx !important;
        }
    }

    .keyboard .type > view,image {
        width: 80px;
        height: 80px;
        line-height: 80px;
        margin: 10px;
        .btn_icon {
            font-size: 60rpx !important;
        }
    }
    .keyboard .type > .itemW2 {
        width: 180px;
    }
}
@media screen and (orientation: landscape) {
    .keyboard {
        width: 100%;
    }
    .keyboard .type26 {
        width: 1060rpx;
    }
    .type9,
    .type15 {
        width: 420rpx;
    }
	.keyboard .type9 uni-image{
		margin: 14rpx;
	}
	.keyboard .type15 uni-image{
		margin: 18rpx;
	}
    .spanNumber {
        font-size: 36rpx !important;
    }
    .keyboard .type > view,image {
        width: 80rpx;
        height: 80rpx;
        line-height: 80rpx;
        margin: 12rpx;
        .btn_icon {
			width: 46rpx;
			height: 46rpx;
        }
    }
    .keyboard .type > .itemW2 {
        width: 110px;
    }
}
	
</style>

页面使用时：

        <keyboard
            ref="keyboard"
            v-if="keyDownHiow"
            :wordsPage="wordsPage"
            :type="type"
            :is-close="true"
            @submit="submit"
            @keyDown="keyDown"
        ></keyboard>

初始化：

                keyDownHiow: false,
                type: 26,
                cuerrentKey: '' ,// 当前获焦输入框
                wordsPage:''

聚焦事件：

            valCodeInput(val) {
                let vm = this;
                vm.keyDownHiow = true;
                vm.$nextTick(() => {
                    if (vm.cuerrentKey !== val) {
                        if (vm.$refs.keyboard) {
                            vm.$refs.keyboard._data.words = vm[val];
                        }
                    }
                    vm.cuerrentKey = val;
                });
            },
            submit() {
                this.keyDownHiow = false;
            },
            // 键盘按下回填
            keyDown(val) {
                if(this.cuerrentKey === 'valueCode') {
                    this.valueCode = val;
                    this.wordsPage = val
                } else {
                    this.valuePws = val;
                    this.wordsPage = val
                }
            },