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

发布于 2021-7-3 23:34
浏览
2收藏

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

效果图

小写 大写 符号
 在OpenHarmony上开发的第一个应用-WIFI(下)-开源基础软件社区  在OpenHarmony上开发的第一个应用-WIFI(下)-开源基础软件社区  在OpenHarmony上开发的第一个应用-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>

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

JS代码

    props:["value"],
    data: {
        numbers:"1234567890",
        letters:["qwertyuiop","asdfghjkl","zxcvbnm"],
        symbols:["#$%^&*_+<>","-/:;()—@“”","…~、?!.,。"],
        isUp:false,
        isShowSymbol:false,
    },

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

  1. number-数字键盘字符串
  2. letters-字母键盘的3行字符串数组
  3. symbols-字符键盘的3行字符串数组
  4. isUp-是否为大写
  5. 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;
    }
},

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-7-3 23:34:58修改
4
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐