鸿蒙应用开发input多选效果实现 原创

这里用input组件敲了个案例

Type为text时为输入框

Type为button时为按钮

Type为checkbox为多选按钮

Type为radio为单选按钮

Html代码如下：

<div class="content">
    <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
           headericon="/image/soushuo.jpeg" placeholder="Please input text" onchange="change"
           onenterkeyclick="enterkeyClick">
    </input>
    <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
    <text style="margin-top: 50px;">多选</text>
    <div class="check">
        <text>踢足球：</text>
        <input onchange="checkboxOnChange_one" checked="true" type="checkbox"></input>
        <text>打篮球：</text>
        <input onchange="checkboxOnChange_two" checked="true" type="checkbox"></input>
        <text>打羽毛球：</text>
        <input onchange="checkboxOnChange_three" checked="true" type="checkbox"></input>
    </div>
    <text style="margin-top: 50px;">单选</text>
    <div class="radio_button">
        <div>
            <text>选择1</text>
            <input type="radio" checked='true' name="radioSample" value="按钮1" onchange="onRadioChange('按钮1')"></input>
        </div>
        <div>
            <text>选择2</text>
            <input type="radio" checked='false' name="radioSample" value="按钮2" onchange="onRadioChange('按钮2')"></input>
        </div>
        <div>
            <text>选择3</text>
            <input type="radio" checked='false' name="radioSample" value="按钮3" onchange="onRadioChange('按钮3')"></input>
        </div>
    </div>
</div>

Css样式如下：

.content {
    width: 100%;
    flex-direction: column;
    align-items: center;
}
.input {
    placeholder-color: gray;
    align-items: center;
}
.button {
    background-color: gray;
    margin-top: 20px;
    align-items: center;
}
.check{
    margin-top: 50px;
}
.radio_button{
    width: 100%;
    height: 200px;
    justify-content: center;
    align-items: center;
}
Js代码如下：

import prompt from '@system.prompt'
export default {
    change(e){
        prompt.showToast({
            message: "value: " + e.value,
            duration: 3000,
        });
    },
    enterkeyClick(e){
        prompt.showToast({
            message: "enterkey clicked",
            duration: 3000,
        });
    },
    buttonClick(e){
        this.$element("input").showError({
            error: 'error text'
        });
    },
    checkboxOnChange_one(e) {
        prompt.showToast({
            message:'足球为: ' + e.checked,
            duration: 3000,
        });
    },
    checkboxOnChange_two(e) {
        prompt.showToast({
            message:'篮球为: ' + e.checked,
            duration: 3000,
        });
    },
    checkboxOnChange_three(e) {
        prompt.showToast({
            message:'羽毛球为: ' + e.checked,
            duration: 3000,
        });
    },
    onRadioChange(inputValue, e) {
        if (inputValue === e.value) {
            prompt.showToast({
                message: '当前按钮为:' + e.value,
                duration: 3000,
            });
        }
    }
}

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/JS_input