<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>