#夏日挑战赛#【FFH】JS自定义组件：DIY一个随点随用的键盘！(二) 原创精华

FFH_PETSJ

发布于 2022-7-26 08:47

浏览

1收藏

本文正在参加星光计划3.0–夏日挑战赛

ArkUI自定义组件实战开发：如何快速拥有一个私人定制的软键盘？

前言

书接上文：JS自定义组件：DIY一个随点随用的键盘！(一)
上篇所写的自定义键盘只能绑定主界面的一个数据。要想进行主界面多数据、解耦的绑定输入，还需要改进。

改进效果

这里以写一个登录界面为例
#夏日挑战赛#【FFH】JS自定义组件：DIY一个随点随用的键盘！(二)-鸿蒙开发者社区

改进思路

解决问题：如何实时绑定和切换数据？
在自定义组件liteKeyboard.js中增加一个text属性，它的值为当前所focus的文本输入框的实时内容。当focus时，向组件传递已有的值并绑定到存储键盘输入的inputText中，实现切换更新效果；而当text内容更新，借助this.$watch(‘text’, ‘onTextChange’)函数来监听text的更改并绑定储存数组inputText，其余代码与上篇无变化。

liteKeyboard.js

onInit() {
this.$watch(‘text’, ‘onTextChange’); //—在生命周期init事件中增加监听事件
},
onTextChange(newV, oldV) {
// console.info('text change ’ + newV + ’ from ’ + oldV);
this.inputText = this.text
},

index.hml

<litekeyboard text=“{{text}}” is-valid=“false” @text-type=“textClick”></litekeyboard>

index.js：在不改变应用原有数据结构的基础上增加一些数据绑定和切换输入框的逻辑

var showContent=[] //---新增
export default {
    data: {
        username: "",
        password:'',
        text:'',
    },
    onInit() {
        let info1 = {
            id:'username',
            show:false, //---设置一个flag判断此输入框当前是否focus
            value:''
        }
        showContent.push(info1)
        let info2 = {
            id:'password',
            show:false,
            value:''
        }
        showContent.push(info2) //---存储两个文本对象
    },
    textClick(e){
        this.text = e.detail.text //
        for(let i=0;i<showContent.length;i++){
            if(showContent[i].show===true){
                showContent[i].value = this.text //---找到当前focus的文本输入框，更新数据
            }
        }
        this.username=showContent[0].value //---实时更新数据
        this.password=showContent[1].value 
    },
    usernameInput(){
        this.text = this.username //---text更改为当前(username)已存在内容，此时触发组件的onTextChange事件
        showContent[0].show=true //---切换到当前(username)的输入，此show设置为true，其余为false
        showContent[1].show=false
        this.$element('keyboard').show()
    },
    passwordInput(){
        this.text = this.password //---同理
        showContent[1].show=true
        showContent[0].show=false
        this.$element('keyboard').show()
    },

}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.

index界面其余代码：
index.hml

<element name="liteKeyboard" src="../../common/component/liteKeyboard.hml"></element>

<div class="container">
    <div class="inputContainer">
        <div class="inputItem">
            <label target="user">用户名</label>
            <input onclick="usernameInput" id="user" type="text" value="{{username}}"></input>
        </div>
        <div class="inputItem">
            <label target="password">密码</label>
            <input onclick="passwordInput" id="password" type="text" value="{{password}}"> </input>
        </div>
    </div>
    <dialog id="keyboard" style="width : 100%; height : 700px; position : fixed;" >
        <litekeyboard text="{{text}}" is-valid="false" @text-type="textClick"></litekeyboard>
    </dialog>

</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

hml.css

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
}

.inputContainer {
    text-align: center;
    flex-direction: column;
    width: 100%;
    position: absolute;
    margin-top: 100px;
}
input {
    margin-top: 20px;
    border-radius: 10px;
    color: white;
    background-color: lightslategrey;
}
.inputItem {
    flex-direction: row;
    text-align: center;
    width: 100%;
}
.inputItem > label {
    width: 200px;
    text-align: right;
    margin-right: 30px;
    font-size: 40px;
    font-weight: 500;
    color: white;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.