unimall/unimall-app/components/VKeyboard/VKeyboard.vue

<template>
	<view :class="keyboardStyle">
		<view class="digit-keyboard" v-if="mode === 'digit' || digital">
			<view class="digit-button-box">
				<template v-for="(digit, index) in digits">
					<view :key="index" class="key-button digit" @tap="typing('.')" v-if="index === 9">.</view>
					<view :key="index" class="key-button digit" @tap="typing(digit)">{{digit}}</view>
				</template>
				<view class="key-button digit">
					<i class="iconfont icon-shouqijianpan middle" v-if="digital" @tap="deactivate"></i>
					<i class="iconfont icon-ABC middle" v-else @tap="typingLetter"></i>
				</view>
			</view>
			<view class="special-button-box">
				<view class="key-button special-button gray" @tap="backspace"><i class="iconfont icon-backspace large"></i></view>
				<view class="key-button special-button gray" @tap="enter"><i class="iconfont icon-huiche large"></i></view>
			</view>
		</view>
		<view class="full-keyboard" v-else>
			<view class="line" v-for="(letters, index) in lines" :key="index">
				<view class="letter key-button special-key gray" v-if="index === 3 && mode === 'letter'" @tap="toggleCase"><i :class="'iconfont ' + (lowercase ? 'icon-xiaoxie' : 'icon-daxie')"></i></view>
				<view class="letter key-button normal" v-for="letter in letters" @tap="typing(letter)" :key="letter">{{letter}}</view>
				<view class="letter key-button special-key gray" v-if="index === 3" @tap="backspace"><i class="iconfont icon-backspace"></i></view>
			</view>
			<view class="line special-line">
				<view class="letter key-button swith-key gray">
					<i class="iconfont icon-fuhao" @tap="typingSymbol" v-if="mode === 'letter'"></i>
					<i class="iconfont icon-ABC" @tap="typingLetter" v-if="mode === 'symbol'"></i>
				</view>
				<view class="letter key-button space" @tap="typing(' ')"><text class="logo">Magician 安全键盘</text></view>
				<view class="letter key-button swith-key gray" @tap="typingDigit"><i class="iconfont icon-shuzi"></i></view>
				<view class="letter key-button swith-key gray" @tap="enter"><i class="iconfont icon-huiche"></i></view>
			</view>
		</view>
	</view>
</template>

<script>
	import './css.scss'
	import { natural, order, disorder, symbols, digits, KEYBOARD_MODE } from './utils'
	export default {
		props: {
			//是否为纯数字键盘
			digital: {
				type: [ Boolean, String ],
				default: false
			},
			//是否无序的排序键盘
			disorderly: {
				type: [ Boolean, String ],
				default: false
			}/* ,
			value: String */
		},
		//app中不生效，不知道为什么
		/* model: {
			prop: 'value',
			event: 'typing'
		}, */
		computed: {
			keyboardStyle() {
				return 'v-keyboard ' + this.cls;
			}
		},
		data() {
			return {
				cls: '',							
				visible: false,					//是否显示
				digits: [],						//自然数数组
				lines: [],						//字母+数字数组
				lowercase: true,				//是否小写输入状态
				mode: KEYBOARD_MODE.LETTER,		//键盘模式
				keys: []						//键入的键值
			}
		},
		methods: {
			//大小写转换
			toggleCase() {
				this.lowercase = !this.lowercase;
			},
			//输入符号
			typingSymbol() {
				this.mode = KEYBOARD_MODE.SYMBOL;
				this.lines = symbols;
			},
			//输入字母
			typingLetter() {
				this.mode = KEYBOARD_MODE.LETTER;
				this.lines = this.disorderly ? disorder() : order;
			},
			//键入数字
			typingDigit() {
				this.mode = KEYBOARD_MODE.DIGIT;
			},
			//键盘键入
			typing(input) {
				this.keys.push(input);
				//app中v-model不生效，改用事件方式在外处理
				//this.$emit('typing', this.keys.join(''));
				
				this.$emit('typing', {
					backspace: false,
					char: input
				})
			},
			//退格键
			backspace() {
				if (this.keys.length) {
					this.keys.pop()
				}
				//this.$emit('typing', this.keys.join(''));
				this.$emit('typing', {
					backspace: true
				})
			},
			//键入回车
			enter() {
				//this.deactivate();
				this.$emit('enter');
			},
			//激活键盘
			activate() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
				this.visible = true;
			},
			//隐藏键盘
			deactivate() {
				this.visible = false;
			}
		},
		watch: {
			lowercase(val) {
				let [...temp ] = this.lines;
				temp.forEach(line => {
					line.forEach((letter, index) => {
						line[index] = val ? letter.toLowerCase() : letter.toUpperCase();
					});
				});
				this.lines = temp;
			},
			visible(val) {
				this.cls = val ? 'slideup' : 'slidedown';
			}
		},
		created() {
			this.lines = this.disorderly ? disorder() : order;
			this.digits = this.disorderly ? digits() : natural;
		}
	}
</script>

<style lang="scss" scoped>
	.key-button {
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
		border: 1px solid #e6e6e6;
		color: #333;
		background-color: #fff;
		box-shadow: 0 2px 2px rgba(230,230,230,.7);
		border-radius: 0.35em;
		text-align: center;
		white-space: nowrap;
		user-select: none;
		cursor: pointer;
		
		&:active {
			background: #d6d6d6;
			scale: 0.7;
		}
	}
	
	.v-keyboard {
		transform: translateY(100%);
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #f5f5f5;
		padding: .5em 0;
		z-index: 100;
		
		/*全键盘*/
		.full-keyboard {
			.line {
				text-align: center;
				
				&:not(:last-child) {
					margin-bottom: 0.5em;
				}
				
				.letter {
					height: 1.7em;
					line-height: 1.7em;
					font-size: 1em;
					
					&:not(:last-child) {
						margin-right: 0.2em;
					}
				}
				
				.normal {
					width: 1.65em;
				}
				
				.special-key {
					width: 2.6em;
				}
			}
				
			.special-line {
				padding: 0 0.35em;
				display: flex!important;
				justify-content: space-around;
				
				.space {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.swith-key {
					width: 2.6em;
				}
				
				.logo {
					font-size: 12px;
				}
			}
		}
		
		/*数字键盘*/
		.digit-keyboard {
			display: flex;
			flex-direction: row;
			.digit-button-box {
				padding: 0 .35em;
				flex: 80;
				.digit {
					width: 4.46em;
					height: 2.5em;
					line-height: 2.5em;
					margin-bottom: .35em;
					&:nth-child(10),
					&:nth-child(11),
					&:nth-child(12) {
						margin-bottom: 0;
					}
					&:not(:last-child) {
						margin-right: .35em;
					}
				}
			}
			
			.special-button-box {
				flex: 20;
				padding: 0 .35em 0 0;
				.special-button {
					display: block;
					line-height: 5.5em;
					height: 5.5em;
					width: 4em;
					&:not(:last-child) {
						margin-bottom: .35em;
					}
				}
			}
		}
		
		.gray {
			background: #e1e1e1!important;
			&:active {
				background: #fff!important;
			}
		}
		
		.large {
			font-size: 2em!important;
		}
		
		.middle {
			font-size: 1.2em!important;
			display: block;
		}
	}
</style>