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

这里用input组件敲了个案例

Type为text时为输入框

Type为button时为按钮

Type为checkbox为多选按钮

Type为radio为单选按钮

图片1.png (51.2 KB, 下载次数: 0)

2021-4-27 10:39 上传

图片2.png (49.59 KB, 下载次数: 0)

2021-4-27 10:40 上传

图片3.png (52.66 KB, 下载次数: 0)

2021-4-27 10:40 上传

Html代码如下：

headericon="/image/soushuo.jpeg" placeholder="Please input text"

onenterkeyclick="enterkeyClick">

多选

踢足球：

打篮球：

打羽毛球：

单选

选择1

选择2

选择3

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代码如下：

importprompt 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