在OpenHarmony上开发的第一个应用-WIFI(下）原创

panda_coder

发布于 2021-7-3 23:34

浏览

2收藏

本文主要讲解WiFi应用中的键盘/输入法（以下称为键盘）开发

效果图

小写	大写	符号

UI排版

简要分析一下键盘的布局
首先键盘分为上下两部分。上面部分为功能区，第一个功能用于切换符号键盘，第二个功能用于关闭键盘；下面部分为键盘内容区，也就是字符输入区域，输入区域同时参杂一些特殊按键。
代码截图分析：
在OpenHarmony上开发的第一个应用-WIFI(下）-鸿蒙开发者社区
字母/字符区键盘详细代码

<!--        键盘显示-->
<div class="key-letter keyboard-key">
    <div style="padding:0 20px;">
        <button class="btn btn-key" @touchend="{{keyDown($item)}}" for="{{letterKeys[0]}}">{{$item}}</button>
    </div>
    <div style="padding: 0 40px;">
        <button class="btn btn-key" @touchend="{{keyDown($item)}}" for="{{letterKeys[1]}}">{{$item}}</button>
    </div>
<!--            含特殊按键的第三列-->
    <div>
        <button @touchend="upKey" if="{{!isShowSymbol}}"  class="btn btn-key btn-key-tools {{isUp?'letter-up':''}}">{{isUp?"A":"a"}}</button>
        <button @touchend="showLetter" else class="btn btn-key btn-key-tools" style="font-size: 28px;padding: 26px 18px;" >Aa</button>
        <button @touchend="{{keyDown($item)}}" class="btn btn-key" for="{{letterKeys[2]}}">{{$item}}</button>
        <button @touchend="deleteOne" class="btn btn-key btn-key-tools">Х</button>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

为了处理特殊的功能按键，我们把字母区域分为了三行，前两行无特殊按键只用button按钮循环letterKeys二维数组中对应的值就行
第三行需要处理特殊按键。除特殊按钮单独绑定事件外，每个按钮绑定相同keyDwon事件，以此响应按键按下后的操作。

JS代码

    props:["value"],
    data: {
        numbers:"1234567890",
        letters:["qwertyuiop","asdfghjkl","zxcvbnm"],
        symbols:["#$%^&*_+<>","-/：；（）—@“”","…～、？！.，。"],
        isUp:false,
        isShowSymbol:false,
    },
1.
2.
3.
4.
5.
6.
7.
8.

props为父组件传递的参数，其中value为传递的默认值
data中定义

number-数字键盘字符串
letters-字母键盘的3行字符串数组
symbols-字符键盘的3行字符串数组
isUp-是否为大写
isShowSymbol-是否显示字符
看了这个定义大家肯定好奇大小写是怎么实现的，关键代码：computed

computed:{
    numberKeys(){
        return this.numbers.split('');
    },
    letterKeys(){
        let keys=[];
        //当为符号时返回符号按钮
        if(this.isShowSymbol){
            this.symbols.forEach(t=>{
                keys.push(t.split(''))
            })
            return keys;
        }
        this.letters.forEach(t=>{
            //大小写转换
            t=this.isUp?t.toUpperCase():t.toLowerCase();
            keys.push(t.split(''))
        })
        return keys;
    }
},
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

String.split(‘’)；函数将字符串返回为char数组，
String.toUpperCase()；函数将字符串转换为大写，
String.toLowerCase()；函数将字符串转换为小写
按钮通过事件改变isShowSymbol和isUp这两个值来进行键盘内容区的切换。
通过this.$emit(‘change’,this.value)；自定义一个change事件，并返回value值，在每次字符按下时触发，以此返回给父组件键盘输入值。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

已于2021-7-3 23:34:58修改