[文章]

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

2021-4-27 10:41:13  434 harmonyos
分享

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

1
这里用input组件敲了个案例
Typetext时为输入框
Typebutton时为按钮
Typecheckbox为多选按钮
Typeradio为单选按钮
图片1.png
图片2.png
图片3.png
Html代码如下:

<div class="content">
    <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
           headericon="/image/soushuo.jpeg" placeholder="Please input text"
           onenterkeyclick="enterkeyClick">
    </input>
    <input class="button" type="button" value="Submit"></input>
    <text style="margin-top: 50px;">多选</text>
    <div class="check">
        <text>踢足球:</text>
        <input checked="true" type="checkbox"></input>
        <text>打篮球:</text>
        <input checked="true" type="checkbox"></input>
        <text>打羽毛球:</text>
        <input 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

评论

您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
发文章
快速回复
扫一扫分享
返回顶部 返回列表