#夏日挑戰賽#【FFH】JS自定義元件：DIY一個随點随用的鍵盤！(二)

本文正在參加星光計劃3.0–夏日挑戰賽

ArkUI自定義元件實戰開發：如何快速擁有一個私人定制的軟鍵盤？

前言

書接上文：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()
    },

}

           

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>
           

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;
}

           

關于liteKeyboard的代碼參考 JS自定義元件：DIY一個随點随用的鍵盤！(一)