更新记录

1.0.0（2024-01-12） 下载此版本

uniappx 数字键盘 uts数字键盘 虚拟键盘

平台兼容性

youlan-keyboard

uniappx 自定义数字键盘，虚拟数字键盘

开发文档

引入组件

如果你下导入了示例项目，首页并不是虚拟键盘的案例，pages/Keyboard/Keyboard 页面才是虚拟键盘案例

<view class="box">
    <view class="test_flex" @click="show = true;">
        <view class="label">默认键盘</view>
        <view class="ml-20">{{key1}}</view>
    </view>
    <view class="test_flex" @click="show1 = true;">
        <view class="label">自定义键盘</view>
        <view class="ml-20 text">{{key2}}</view>
    </view>
</view>

// 根据你所在的目录引用
import youlanKeyboard from '@/uni_modules/youlan-keyboard/utssdk/app-android/index.vue'

注册组件

// 具体的使用教程建议下载我提供的完整案例
components: {
    youlanKeyboard
},

使用方式

<youlanKeyboard v-model:show="show" @longpress="butLongpress" @input="input" @close="close" @delete="deleteFun" />

// 自定义
<youlanKeyboard v-model:show="show1" @input="input1" @close="close" @delete="deleteFun1" @longpress="butLongpress1">
    <template v-slot:close>
        close
    </template>
    <template v-slot:delete>
        delete
    </template>
</youlanKeyboard>

export default {
    data() {
        return {
            show: false as boolean,     // 是否显示键盘
            show1: false as boolean,
            key1: "" as string,
            key2: "" as string,
        }
    },
    components: {
        youlanKeyboard
    },
    methods: {
        input(key: string):void {
            console.log(key);
            this.key1 += key;
        },
        close():void {
            console.log("关闭");
        },
        deleteFun():void {
            if(this.key1.length == 0) return
            this.key1 = this.key1.slice(0, -1);
        },
        // 删除按钮长按
        butLongpress():void {
            this.key1 = "";
        },
        input1(key: string):void {
            console.log(key);
            this.key2 += key;
        },
        deleteFun1():void {
            if(this.key2.length == 0) return
            this.key2 = this.key2.slice(0, -1);
        },
        butLongpress1():void {
            this.key2 = "";
        },
    }
}

属性说明

方法说明

Slots