鸿蒙JS开发14 自定义构建购物计算组件&表单组件

想了解更多内容，请访问：

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

1.前言:

在第九篇文章购物车做好后,还忘记了一个至关重要的计算组件.在鸿蒙的组件中并没有提供这样一个计算功能的组件,因此我们今天来自定义一个,这个组件和之前做的购物车的小项目放在一起.直男缺乏美感,我们就模仿别人的就行:

2.组件介绍:

这里(以后也要用到)要用到一个标签:<input> .这个标签会与表单用在一起,比如搜索框,登录页面等都会用到<input>.input>.input>标签规定用户可输入数据的输入字段.type属性规定 input元素的类型, 根据不同的 type 属性,输入字段有多种形态.输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等,今天所用到的是文本字段、复选框字段和密码字段.

3.js业务逻辑层:

点击事件onclick后,执行+的操作可以没有上限,但执行-操作在实际应用(例如购物车商品的数量)当中一般是减1后就停止.这里我们做一个提示框,用来表示已经减到最小。

import prompt from '@system.prompt'; 
export default { 
    data: { 
        title: 'World', 
        num:1, 
    }, 
    addnum(){ 
        ++this.num; 
    }, 
    reducenum(){ 
        if(this.num>1){ 
            --this.num; 
        } 
        else{ 
            prompt.showToast({ 
                message:"对不起,商品至少为一件", 
                duration:5000, 
            }) 
        } 
    } 
} 

4.视图层:

这里type的value可以是接收text,同样也可以是number 读者可以自行尝试。

<div class="container"> 
  <div class="countview"> 
      <text class="tv1" onclick="reducenum">-</text> 
          <input class="inputview" type="text" value="{{num}}"></input> 
      <text class="tv2" onclick="addnum">+</text> 
  </div> 
</div> 

5.css属性设置:

本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：休斯顿受飓风袭击！米主将域名houston.com捐赠给红十字会 下一篇：没有了