wardrobe/tm-vuetify/components/tm-keyborad/tm-keyborad.vue

<template>
	<view class="tm-keyborad ">
		<tm-poup isClickbled :isFilter="false" over-color='none'
		:height="530" ref="pop" 
		:bg-color="black_tmeme?'grey-darken-5':'grey-lighten-5'" 
		v-model="showOpen">
			<view>
				<view v-if="model_code=='number'||model_code=='code'" class="tm-keyborad-html">
					<view class=" py-10" :class="[black_tmeme?'grey-darken-5':'grey-lighten-5']">
						<view class="text-size-xs text-align-center pb-20 pt-10 text-weight-b">
							<slot>
								<text>{{title}}</text>
							</slot>
						</view>
						<tm-row custom-class="px-5">
							<tm-col  grid="3" padding="5" color="none">
								<tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b"  @click="clickNumo(1,'num')" :black="black_tmeme" :round="round"  block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color"  height="100">1</tm-button>
							</tm-col>
						
							<tm-col grid="3" padding="5" color="none">
								<tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(2,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">2</tm-button>
							</tm-col>
							<tm-col grid="3" padding="5" color="none">
								<tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(3,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">3</tm-button>
							</tm-col>
							<tm-col grid="3" padding="5" color="none">
								<tm-button :fontSize="42" :iconSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(null,'del')" icon="icon-caret-left" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" :font-color="black?'grey':'black'" height="100"></tm-button>
							</tm-col>
						</tm-row>
						<tm-row align="flex-start">
							<tm-col grid="9"  color="none" custom-class="px-5">
								<tm-row>
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(4,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">4</tm-button></tm-col>
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(5,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">5</tm-button></tm-col>
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42"  :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(6,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">6</tm-button></tm-col>
								</tm-row>
								<tm-row>
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(7,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">7</tm-button></tm-col>
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(8,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">8</tm-button></tm-col>
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(9,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">9</tm-button></tm-col>
								</tm-row>
								<tm-row v-if="model_code=='number'">
									<tm-col :grid="decimal?4:8" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(0,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">0</tm-button></tm-col>
									<tm-col v-if="decimal" grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo('.','dian')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">.</tm-button></tm-col>
									<tm-col  grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(null,'cancel')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">关闭</tm-button></tm-col>
								</tm-row>
								<tm-row v-if="model_code=='code'">
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(0,'num')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">0</tm-button></tm-col>
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo('x','code-x')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">X</tm-button></tm-col>
									<tm-col grid="4" padding="5" color="none"><tm-button :fontSize="42" :fllowTheme="false" item-class="text-weight-b" @click="clickNumo(null,'cancel')" :black="black_tmeme" :round="round" block :shadow="shadown" :theme="black_tmeme?'grey-darken-4':color" height="100">关闭</tm-button></tm-col>
									
								</tm-row>
							</tm-col>
							<tm-col grid="3"  color="none" custom-class="mt-5 mr-5">
								<tm-button :fontSize="42"  item-class="text-weight-b" :round="round"  label="确认" :theme="okColor" @click.stop="clickNumo(null,'confirm')" block :shadow="shadown"  height="312"></tm-button>
							</tm-col>
						</tm-row>
					</view>
					
				</view>
				
				<view v-if="model_code=='car'" class="tm-keyborad-html">
					<view class=" py-10" :class="[black_tmeme?'grey-darken-5':'grey-lighten-5']">
						<view class="text-size-xs text-align-center pb-20 pt-10  text-weight-b">
							<slot>
								<text>{{title}}</text>
							</slot>
						</view>
						<tm-row  custom-class="px-5">
							<tm-col  grid="10" color="none">
								<tm-row >
									<block v-for="(item,index) in chepai[enIndex]" :key="index">
										
										<tm-col width="12.5%" padding="5" color="none">
											<tm-button :fontSize="32" :iconSize="32" :fllowTheme="false" item-class="text-weight-b"  
											@click="clickNumo(item,'car')" 
											:black="black_tmeme" :round="round"  
											block :shadow="shadown" 
											:theme="black_tmeme?'grey-darken-4':color"
											height="80">
												{{item}}
											</tm-button>
										</tm-col>
									</block>
									
								</tm-row>
							</tm-col>
							<tm-col grid="2" color="none">
								<tm-row>
									<tm-col grid="12" padding="5" color="none">
										<tm-button :fontSize="32" :iconSize="32" :fllowTheme="false" item-class="text-weight-b"  
										@click="clickNumo(null,'del')" icon="icon-caret-left"
										:black="black_tmeme" :round="round"  
										block shadow="0" 
										theme="red"  
										font-color="red"
										text
										height="80">
										</tm-button>
									</tm-col>
									<tm-col grid="12" padding="5" color="none">
										<tm-button item-class="text-weight-b"  
										@click="clickNumo(null,'cancel')" 
										:black="black_tmeme" :round="round"  
										block shadow="0" 
										:theme="okColor"
										:fontSize="32" :iconSize="32"
										text
										height="80">
											关闭
										</tm-button>
									</tm-col>
									<tm-col grid="12" padding="5" color="none">
										<tm-button  item-class="text-weight-b"  
										@click="clickNumo(null,'car-zh')" 
										:black="black_tmeme" :round="round"  
										block :shadow="0" 
										:theme="okColor" 
										text
										:fontSize="32" :iconSize="32"
										height="80">
											中/英
										</tm-button>
									</tm-col>
									<tm-col grid="12" padding="5" color="none">
										<tm-button item-class="text-weight-b"  
										@click="clickNumo(null,'confirm')" 
										:round="round"  
										block :shadow="shadown" 
										:theme="okColor" 
										:fontSize="32" :iconSize="32"
										height="133">
											确认
										</tm-button>
									</tm-col>
								</tm-row>
							</tm-col>
						</tm-row>
					</view>
				</view>
				<view v-if="model_code=='password'" class="tm-keyborad-html">
					<view class=" py-10" :class="[black_tmeme?'grey-darken-5':'grey-lighten-5']">
						<view class="text-size-xs text-align-center pb-20 pt-10  text-weight-b">
							<slot>
								<text>{{title}}</text>
							</slot>
						</view>
						<tm-row  custom-class="px-5">
							<tm-col  grid="10" color="none">
								<tm-row >
									<block v-for="(item,index) in password[enIndex]" :key="index">
										
										<tm-col width="12.5%" padding="5" color="none">
											<tm-button :fllowTheme="false" item-class="text-weight-b"  
											@click="clickNumo(item,'password')" 
											:black="black_tmeme" :round="round"  
											block :shadow="shadown" 
											:fontSize="32" :iconSize="32"
											:theme="black_tmeme?'grey-darken-4':color"
											height="80">
												{{item}}
											</tm-button>
										</tm-col>
									</block>
									
								</tm-row>
							</tm-col>
							<tm-col grid="2" color="none">
								<tm-row>
									<tm-col grid="12" padding="5" color="none">
										<tm-button :fllowTheme="false" item-class="text-weight-b"  
										@click.stop="clickNumo(null,'del')" icon="icon-caret-left"
										:black="black_tmeme" :round="round"  
										block shadow="0" 
										theme="red" 
										font-color="red"
										text
										:fontSize="32" :iconSize="32"
										height="80">
										</tm-button>
									</tm-col>
									<tm-col grid="12" padding="5" color="none">
										<tm-button  item-class="text-weight-b"  
										@click.stop="clickNumo(null,'cancel')" 
										:black="black_tmeme" :round="round"  
										block shadow="0" 
										:theme="okColor"
										:fontSize="32" :iconSize="32"
										text
										height="80">
											关闭
										</tm-button>
									</tm-col>
									<tm-col grid="12" padding="5" color="none">
										<tm-button  item-class="text-weight-b"  
										@click.stop="clickNumo(null,'password-fh')" 
										:black="black_tmeme" :round="round"  
										block :shadow="0" 
										:theme="okColor" 
										text
										:fontSize="32" :iconSize="32"
										height="80">
											英/符
										</tm-button>
									</tm-col>
									<tm-col grid="12" padding="5" color="none">
										<tm-button item-class="text-weight-b"  
										@click.stop="clickNumo(null,'confirm')" 
										:round="round"  
										block :shadow="shadown" 
										:theme="okColor" 
										:fontSize="32" :iconSize="32"
										height="133">
											确认
										</tm-button>
									</tm-col>
								</tm-row>
							</tm-col>
						</tm-row>
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view style="height: var(--window-bottom);"></view>
				<!-- #endif -->
			</view>
		</tm-poup>
	</view>
</template>

<script>
	/**
	 * 输入键盘
	 * @description 输入键盘分为：数字键盘，身份键盘，车牌键盘，密码键盘。
	 * @property {String|Number} value = [] 默认：'',推荐使用v-model,也可使用value.sync双向绑定.
	 * @property {Boolean} show = [] 默认：false,显示键盘，请使用show.sync双向绑定
	 * @property {String} color = [] 默认：white,通用按钮主题色。
	 * @property {String} title = [] 默认：'安全键盘放心输入',键盘顶部标题文字。
	 * @property {String} ok-color = [] 默认：primary, 确认按钮的主题色
	 * @property {Number} round = [] 默认：2,  按钮圆角。
	 * @property {Number} shadown = [] 默认：5,  按钮按钮投影
	 * @property {Boolean} black = [] 默认：false,  暗黑模式。
	 * @property {Boolean} decimal = [] 默认：true,  是否显示小数点。
	 * @property {String} model = [number|code|car|password] 默认：'number',  键盘类型数字键盘，身份证，车牌，密码number|code|car|password
	 * @property {Function} confirm 点击确认或者返回时触发。
	 * @example <tm-keyborad v-model="num" :show.sync="show"></tm-keyborad>
	 */
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
	export default {
		components:{tmIcons,tmButton,tmRow,tmCol,tmPoup},
		name:"tm-keyborad",
		model:{
			prop:'value',
			event:'input'
		},
		props:{
			value:{
				type:String|Number,
				default:''
			},
			// 键盘顶部标题文字。
			title:{
				type:String,
				default:'安全键盘放心输入'
			},
			show:{
				type:Boolean,
				default:false
			},
			// 通用按钮主题色。
			color:{
				type:String,
				default:'white'
			},
			// 确认按钮的主题色
			okColor:{
				type:String,
				default:'primary'
			},
			// 按钮圆角。
			round:{
				type:Number,
				default:3
			},
			// 按钮投影
			shadown:{
				type:Number,
				default:5
			},
		
			black:{
				type:Boolean,
				default:null
			},
			// 是否显示小数点。
			decimal:{
				type:Boolean,
				default:true
			},
			// 键盘类型数字键盘，身份证，车牌，密码
			model:{
				type:String,
				default:'number' //number|code|car|password
			},
			
		},
		computed:{
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			model_code:function(){
				return this.model;
			}
		},
		watch:{
			show:function(val){
				this.showOpen = val;
				
			}
		},
		created() {
			this.showOpen = this.show
		},
		mounted() {

		},
		data() {
			return {
				showOpen:false,
				enIndex:0,
				chepai:[
					[
						'京','沪','津','渝','鲁','冀','晋','蒙','辽','吉','黑','苏','浙',
						'皖','闽','赣','豫','湘','鄂','粤','桂','琼','川','贵','云','藏',
						'陕','甘','青','宁','新','港','澳','台','新','使','学'
					],
					[
					'1','2','A','B','C','D','E','F',
					'3','4','G','H','I','J','K','L',
					'5','6','M','N','O','P','Q','R',
					'7','8','S','T','U','V','W','X',
					'9','0','Y','Z'
					]
					
				],
				password:[
					[
					'1','2','A','B','C','D','E','F',
					'3','4','G','H','I','J','K','L',
					'5','6','M','N','O','P','Q','R',
					'7','8','S','T','U','V','W','X',
					'9','0','Y','Z'
					],
					[
						'\"',"\'",'.','/',"\\",']','[','!','?','_','<','>','%',';',')','(','&','+','=','~','*','#','@'
					]
				],
			};
		},

		methods: {
			clickNumo(val,type){
				let oval = this.value;
				if(type=='del'){
					oval = oval.length<=0?'':oval.substring(0,oval.length-1)
				}else if(type=='num' || type=='code-x'|| type=='car' || type == 'password'){
					oval= oval +'' + val;
				}else if(type=='dian'){
					if(oval.indexOf('.')>-1 || !oval || oval.length==0){
						return;
					}
					oval= oval +'' + val;
				}else if(type=='car-zh'||type=='password-fh'){
					this.enIndex= this.enIndex?0:1
				}
				if(type == 'confirm' || type=='cancel'){
					if(this.model_code=='number'){
						if(oval.substring(oval.length-1)=='.'){
							oval = oval.substring(0,oval.length-1);
						}
					}
					this.$emit('update:show',false);
					if(type=='confirm'){
						this.$emit('input',oval.toUpperCase())
						this.$emit('update:value',oval.toUpperCase())
						this.$emit('confirm',this.value);
					}
					
					return;
				}
				this.$emit('input',oval.toUpperCase())
				this.$emit('update:value',oval.toUpperCase())
				// #ifdef MP || APP
				uni.vibrateShort({})
				// #endif
			},
			
		},
	}
</script>

<style lang="scss" scoped>

</style>