front-end/ghsApp/src/components/keyboard.vue

<template>
	<div class="keyboard">
		<bottom-popup class="popup-wrap" :show="show" maskBgcolor="none" @close="comfirm" :mask="false">
			<div class="ui-keyboard">
				<ul class="ui-keyboard-numbers">
					<li :class="{'zero': item == 0}" v-for="(item, index) in keyLeftData" :key="index" @click="clickKeyFn(item)">{{ item }}</li>
				</ul>
				<ul class="ui-keyboard-btn">
					<li class="btn-del" @click="del">
                        <i class="iconfont iconshanchu"></i>
                    </li>
					<li class="btn-ok" @click="comfirm">搜索</li>
				</ul>
			</div>
		</bottom-popup>
	</div>
</template>

<script>
import BottomPopup from '@/components/plugin/bottom-popup'
export default {
	name: 'keyboard',
	components: {
		BottomPopup
	},
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			keyLeftData: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
		}
	},
	methods: {
		close() {
			this.$emit('comfirm')
		},
		// 点击数字键盘
		clickKeyFn(val) {
			this.$emit('clickKey', val)
		},
		// 确认
		comfirm() {
			this.$emit('comfirm')
		},
		// 删除
		del() {
			this.$emit('del')
		}
	}
}
</script>

<style lang="scss" scoped>
    .popup-wrap {
        .ui-keyboard {
            @include disFlex(center, center);
            padding: 0 20upx 20upx 20upx;
            background-color: $backColor;
            box-shadow: 0 -8upx 16upx #ddd;
            // 左侧键盘
            .ui-keyboard-numbers {
                width: 78%;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                li {
                    width: calc(33.33% - 20upx);
                }
                li.zero {
                    width: calc(66.66% - 20upx);
                }
            }
            // 右侧键盘
            .ui-keyboard-btn {
                width: 22%;
                li {
                    margin-right: 0;
                }
                li.btn-ok {
                    height: 310upx;
                    color: #fff;
                    background-color: $mainColor;
                    // line-height: 310upx
                }
            }
            li {
                @include disFlex(center, center);
                height: 90upx;
                // line-height: 90upx;
                text-align: center;
                border-radius: 10upx;
                background-color: #fff;
                margin-top: 20upx;
                margin-right: 20upx;
                font-size: 38upx;
                font-weight: bold;
                box-shadow: 0 2upx 10upx #ddd;
            }
            li:active {
                background-color: rgba(0, 0, 0, 0.1);
            }
        }
    }
</style>