当前位置：网站首页>＃夏日挑战赛＃【FFH】JS自定义组件：DIY一个随点随用的键盘！(一)

＃夏日挑战赛＃【FFH】JS自定义组件：DIY一个随点随用的键盘！(一)

2022-07-28 17:03:00 【51CTO】

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

前言

平时在Devco Studio调试代码的过程中经常需要输入的操作，像一些根据用户输入来处理数据的模块，然而相信不少的开发伙伴们都苦于预览器previewer中没有自带的输入法键盘，要么运行真机模拟器，要么自己在代码中初始化数据，不太自由和方便。
因此，在看完文档的自定义组件开发后，我决定写一个类似输入法键盘的自定义组件，随点随用。
这个夏天，我要实现输入自由！（来自前端开发人的高呼）
官方文档：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-custom-basic-usage-0000001281361086

效果展示

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

代码实现

代码结构
#夏日挑战赛#【FFH】JS自定义组件：DIY一个随点随用的键盘！(一)_DIY_02

编写自定义组件的事件

理论解释：

liteKeyboard.js代码中，自定义组件接口会提供三个基本的接口函数：

data(){}
props:{}
computed(){}

这里只需使用data和props，（computed用于数据预处理，详情可以去官方文档看）

props

自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。

有两种书写方式

第一种的方式可以给props规定的属性设置默认值（通过关键词default）

props使用演示

liteKeyboard.js

index.hml

<element name="liteKeyboard" src="../../common/component/liteKeyboard.hml"></element>
<div class="container">
    <litekeyboard is-valid="false" @text-type="textClick"></litekeyboard>
</div>

     1.
2.
3.
4.

这里的is-valid属性即是上面设置的isValid，is-valid的值将作为参数传递给isValid
注意：驼峰命名法的 prop 名，在外部父组件传递参数时需要使用短横线分隔命名形式，即当属性isValid在父组件引用时需要转换为is-value。

data

类似pages页面的data:{}，功能除了初始化hml绑定的数据，还可以用来接收父组件（即调用它的组件）的参数
因为自定义组件的数据是单向性的（父传子），子组件即liteKeyboard.js不能直接修改父组件传来的值
引用官方文档：

数据单向性*
父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。

data使用演示：

export default {
    props: {
        isValid:{
            default: 'true'
        },
    },
    data() {
        return {
            inputText: [],
            bit: false,
            isValid: this.isValid //---本地定义isValid接收props传递的参数。再进行修改-
        }
    },

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

除了这三个基本接口，自己也可以自定义事件绑定

通过 this.$emit(‘绑定的函数名’, params:参数) 绑定
liteKeyboard.js

index.js

 textClick(e){
        this.inputText = e.detail.text //---通过e.details.获取$emit传递的参数
        console.info('receive text = '+this.inputText)
    },

     1.
2.
3.
4.

index.hml

理论结束，实战开始

大体思路：

对于数字键盘点击输入的数字用字符数组存储，点击事件触发时将字符数组作为参数text传递，再index.js用e.detail.text获取，并在自定义事件中与把所有需要输入的文本框数据进行绑定。

先写好键盘的样式

对于这种规则的宫格布局，采用grid来布局是不错的方法
liteKeyboard.hml

<div class="container">
    <div class="keyboardCot">
        <div class="grid-container">
            <div class="grid-item" id="1" @click="click">
                <text class="keyboard">1</text>
            </div>
            <div class="grid-item" id="2" @click="click">
                <text class="keyboard">2</text>
            </div>
            <div class="grid-item" id="3" @click="click">
                <text class="keyboard">3</text>
            </div>
            <div class="grid-item" id="4" @click="click">
                <text class="keyboard">4</text>
            </div>
            <div class="grid-item" id="5" @click="click">
                <text class="keyboard">5</text>
            </div>
            <div class="grid-item" id="6" @click="click">
                <text class="keyboard">6</text>
            </div>
            <div class="grid-item" id="7" @click="click">
                <text class="keyboard">7</text>
            </div>
            <div class="grid-item" id="8" @click="click">
                <text class="keyboard">8</text>
            </div>
            <div class="grid-item" id="9" @click="click">
                <text class="keyboard">9</text>
            </div>
            <div class="grid-item" id="." @click="click">
                <text class="keyboard">.</text>
            </div>
            <div class="grid-item" id="0" @click="click">
                <text class="keyboard">0</text>
            </div>
            <div class="grid-item" id="x" @click="click">
                <image src="/common/images/ic_contacts_delete.png"></image>
            </div>
        </div>
    </div>
</div>

     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.

liteKeyboard.css

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

.keyboardCot {
    top: 8%;
    height: 560px;
    width: 660px;
    justify-content: space-around;
    border-radius: 40px;
}

.grid-container {

    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 140px 140px 140px 140px;
    grid-template-columns: 220px 220px 220px;
}

.grid-item {
    background-color: rgba(41, 41, 41, 1);
    border-radius: 100px;
    width: 100%;
    height: 95%;
    margin: 5px;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
}

.grid-item:active {
    background-color: darkgray;
}

.keyboard {
    font-size: 60px;
    font-weight: 300;
    color: white;
}

.grid-item > image {
    height: 80px;
    width: 80px;
}

     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.
47.
48.
49.
50.
51.
52.
53.

编写响应事件

liteKeyboard.js

export default {
    props: {
        isValid:{
            default: 'true'
        },
    },
    data() {
        return {
            inputText: [],//---存储键盘输入数据的字符数组
            bit: false,
            isValid: this.isValid //--- is-valid属性（是否需要数据合法性处理）
        }
    },

    click(e) { //----数字键盘点击事件
        let id = e.target.id
        if (this.isValid === 'false') { //---不用合法处理
            this.randomInput(id).then(texts => {
                this.$emit('textType', {
                    text: texts
                });
            })
        }
        else if (this.isValid === 'true') {
            this.validInput(id).then(texts => {
                this.$emit('textType', {
                    text: texts
                });
            })
        }
        else {
            console.info(`attribute "isValid" error , "isValid" only can be false | true`) //---限定is-valid只有两种参数false和true
        }
    },

    randomInput(id) { //---不需要合法性检查时
        return new Promise((res) => {
            if (id !== 'x') {
                this.inputText += `${id}`
                res(this.inputText)
            } else {
                if (this.inputText.length !== 0) {
                    this.inputText = this.inputText.slice(0, this.inputText.length - 1)
                }
                res(this.inputText)
            }
        })
    },
    validInput(id) { //---合法性检查和处理
        return new Promise((res) => {
            let len = this.inputText.length
            if (id === '.') {
                let a = this.inputText.indexOf('.')
                if (a !== -1)this.bit = true
                else this.bit = false
                if (this.bit || (len === 2 && this.inputText[0] === '0' && this.inputText[1] === '.'))res(this.inputText)
            }
            if (len === 1) {
                if (this.inputText[0] === '0' && id !== '.' && id !== 'x')res(this.inputText)
            }
            if (id === 'x') {
                console.info('x')
                if (len !== 0) {
                    this.inputText = this.inputText.slice(0, len - 1)
                    res(this.inputText)
                }
            }
            if (len <= 7) {
                if (id !== 'x') {
                    this.inputText += `${id}`
                    res(this.inputText)
                }
            }
            res(this.inputText)
        })
    }
}

     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.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.

父组件界面（配合dialog弹窗食用更佳！）

index.hml

<element name="liteKeyboard" src="../../common/component/liteKeyboard.hml"></element>
<div class="container">
    <div class="titleCot" onclick="showKeyboard">
        <div class="titleText">
            <text style=" flex-wrap : wrap; justify-content : space-around; height : 200px; color : white; font-size : 90px;" >{{inputText}}
			</text> <!--换成input文本框会与真机的输入法冲突。。-->
        </div>
    </div>

    <dialog style="width : 100%; height : 800px; position : fixed;" id="keyboard"> 
        <litekeyboard 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.
19.

export default {
    data: {
        inputText:''
    },
    onInit() {
    },
    textClick(e){ //---自定义事件（点击）
        this.inputText = e.detail.text //---在这里进行数据绑定
        console.info('receive text = '+this.inputText)
    },
    showKeyboard(){ //---带输入文本框组件的点击事件
        this.$element('keyboard').show()//---当点击待输入的文本框时就拉起键盘
    },
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

.titleText {
    text-align: center;
    height: 200px;
}
.titleCot {
    position: absolute;
    width: 100%;
    height: 200px;
    align-content: space-around;
    background-color: gray;
    align-items: center;
    justify-content: space-around;
}

     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.