mianxueyoupin/components/wanl-keyboard/wanl-keyboard.vue

<template>
	<view id="number-keyboard-component" class="numberkeyboard" v-show="numberKeyboardPopupVisible">
		<view class="title" @tap="close"><image :src="$wanlshop.appstc('/common/img_down3x.png')" style="width: 30upx;height: 30upx;"></image></view>
		<view class="keys">
			<view class="key button" v-for="num in config.loop" :key="num.key" @tap="number(num.number)">{{ num.number }}</view>
			<view class="key button" @tap="empty" style="background: #f5f5f5;"><image :src="$wanlshop.appstc('/common/img_empty3x.png')" style="width: 50upx;height: 50upx;"></image></view>
			<view class="key button" @tap="number(0)">0</view>
			<view class="key button" @tap="del" style="background: #f5f5f5;"><image :src="$wanlshop.appstc('/common/img_delete3x.png')" style="width: 50upx;height: 50upx;"></image></view>
		</view>
		<view class="iPhonex"></view>
	</view>
</template>

<script>
export default {
	name: 'WanlKeyboard',
	props: {
		open: {
			type: Boolean,
			default: false
		},
		color: {
			type: String,
			default: '#04BE02'
		}
	},

	data() {
		return {
			config: {
				loop: [
					{
						number: 1,
						key: 'number-1'
					},
					{
						number: 2,
						key: 'number-2'
					},
					{
						number: 3,
						key: 'number-3'
					},
					{
						number: 4,
						key: 'number-4'
					},
					{
						number: 5,
						key: 'number-5'
					},
					{
						number: 6,
						key: 'number-6'
					},
					{
						number: 7,
						key: 'number-7'
					},
					{
						number: 8,
						key: 'number-8'
					},
					{
						number: 9,
						key: 'number-9'
					}
				]
			},
			numberKeyboardPopupVisible: this.open
		};
	},
	watch: {
		numberKeyboardPopupVisible: function(value, oldValue) {
			if (value == false) {
				this.$emit('close');
			}
		},
		open: function(value, oldValue) {
			console.log(value);
			this.numberKeyboardPopupVisible = value;
		}
	},
	methods: {
		close() {
			this.numberKeyboardPopupVisible = false;
			this.$emit('close');
		},
		del() {
			this.$emit('delete');
		},
		empty() {
			this.$emit('empty');
		},
		number(number) {
			this.$emit('number', number);
		}
	}
};
</script>

<style>
.numberkeyboard {
	position: fixed;
	width: 100%;
	bottom: 0;
}
.numberkeyboard .title {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50upx;
	background: #f9f9f9;
}
.numberkeyboard .keys {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.numberkeyboard .keys .key {
	width: 250upx;
	height: 120upx; 
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: 1px solid #f5f5f5;
	box-sizing: border-box;
	font-size: 40upx;
}
.numberkeyboard .keys .key:nth-child(n + 4) {
	border-top: 1px solid #f5f5f5;
	box-sizing: border-box;
}

.numberkeyboard .keys .key:active {
	background: #dddddd;
}

.iPhonex {
	padding-bottom: calc(env(safe-area-inset-bottom) * 1.5);
	background-color: #f5f5f5;
}
</style>