更新记录

1.0.0(2019-07-17) 下载此版本


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

使用

<DigitalKeyboard 
@change="contToggle" 
@closeKeyboard="closeKeyboard" 
:keyBoardSwitch="keyBoardSwitch" 
:decimalPoint="true">
</DigitalKeyboard>
import DigitalKeyboard from '../../components/digital-keyboard/digital-keyboard.vue'
components:{
    DigitalKeyboard
},

属性说明:

属性名 类型 默认值 说明
keyBoardSwitch Boolean false 键盘开关 true显示false隐藏
decimalPoint Boolean false 是否显示小数点

事件说明:

事件名 说明 返回值
change 键盘点击事件 k(0-9)
closeKeyboard 键盘隐藏时触发 value(12456)

示列

<template>
    <view class="content" @tap="hiddenKeyboard">
        <view class="input-row" @tap.stop="showKeyboard">
            <view :class="['item',{'item-active':codeLength==index}]" v-for="(k,index) in arr" :key="index">
                {{code.charAt(index)}}
            </view>
        </view>
        <DigitalKeyboard @change="contToggle" @closeKeyboard="closeKeyboard" :keyBoardSwitch="keyBoardSwitch" :decimalPoint="true"></DigitalKeyboard>
    </view>
</template>

<script>
    import DigitalKeyboard from '../../components/digital-keyboard/digital-keyboard.vue'
    export default {
        components:{
            DigitalKeyboard
        },
        data() {
            return {
                arr:['','','','','',''],
                code:'',
                codeLength:null,
                length:6,
                keyBoardSwitch:false,
            }
        },
        methods: {
            showKeyboard(){
                this.codeLength=this.code.length==6?5:this.code.length;
                this.keyBoardSwitch=true;
            },
            hiddenKeyboard(){
                this.keyBoardSwitch=false;
                this.codeLength=null;
            },
            closeKeyboard(value){
                console.log(value);
            },
            contToggle(k){
                let len=this.code.length;
                if(k===''){
                    this.code=this.code.substring(0,len-1);
                    this.codeLength=this.code.length;
                    return;
                }
                this.codeLength=len+1;
                this.code+=k.toString();
                if(this.length===len+1){
                    this.keyBoardSwitch=false;
                    return;
                }
            }
        }
    }
</script>

<style lang="scss">
    page,.content{
        width: 100vw;
        min-height: 100vh;
        margin: 0;
        box-sizing: border-box;
    }
    .input-row{
        width: 600upx;
        margin: 0 auto;
        padding: 30upx 0;
        box-sizing: border-box;
        font-size: 24px;
        text-align: center;
        .item{
            float: left;
            width: 80upx;
            height: 80upx;
            line-height: 80upx;
            border-radius: 10upx;
            margin:0 10upx;
            border: 1px solid #C8C8C8;
            background: #fff;
            box-sizing: border-box;
        }
        .item-active{
            position: relative;
            border: 1px solid #f4000a;
            transform: scale(1.2);
            --webkit-transform: scale(1.2);
        }
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问