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

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

成都创新互联成立与2013年，先为濮阳县等服务建站，濮阳县等地企业，进行企业商务咨询服务。为濮阳县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

https://harmonyos./#zz

1.前言:

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

 2.组件介绍:

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

3.js业务逻辑层:

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

 
 
 
 
    
  
  
  
  
  1. import prompt from '@system.prompt'; 
    2. 
  
  
  
  
  2. export default { 
    3. 
  
  
  
  
  3.     data: { 
    4. 
  
  
  
  
  4.         title: 'World', 
    5. 
  
  
  
  
  5.         num:1, 
    6. 
  
  
  
  
  6.     }, 
    7. 
  
  
  
  
  7.     addnum(){ 
    8. 
  
  
  
  
  8.         ++this.num; 
    9. 
  
  
  
  
  9.     }, 
    10. 
  
  
  
  
  10.     reducenum(){ 
    11. 
  
  
  
  
  11.         if(this.num>1){ 
    12. 
  
  
  
  
  12.             --this.num; 
    13. 
  
  
  
  
  13.         } 
    14. 
  
  
  
  
  14.         else{ 
    15. 
  
  
  
  
  15.             prompt.showToast({ 
    16. 
  
  
  
  
  16.                 message:"对不起,商品至少为一件", 
    17. 
  
  
  
  
  17.                 duration:5000, 
    18. 
  
  
  
  
  18.             }) 
    19. 
  
  
  
  
  19.         } 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21. } 
    22.

 4.视图层:

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

   
 
 
 
    
    
  
  
  
  1.  
    2. 
    
  
  
  
  2.    
    3. 
    
  
  
  
  3.       - 
    4. 
    
  
  
  
  4.            
    5. 
    
  
  
  
  5.       + 
    6. 
    
  
  
  
  6.   
 
  •  

     5.css属性设置:

     
 
 
 
      
  
  
  
  
    1. .container { 
      2. 
  
  
  
  
    2.     width: 100%; 
      3. 
  
  
  
  
    3.     height:1200px; 
      4. 
  
  
  
  
    4.     display: flex; 
      5. 
  
  
  
  
    5.     justify-content: center; 
      6. 
  
  
  
  
    6.     align-items: center; 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8. .countview{ 
      9. 
  
  
  
  
    9.     width: 300px; 
      10. 
  
  
  
  
    10.     height: 120px; 
      11. 
  
  
  
  
    11.     /**border: 3px solid red;**/ 
      12. 
  
  
  
  
    12.     display: flex; 
      13. 
  
  
  
  
    13.     justify-content: center; 
      14. 
  
  
  
  
    14.     align-items: center; 
      15. 
  
  
  
  
    15.    border-radius: 100px; 
      16. 
  
  
  
  
    16. } 
      17. 
  
  
  
  
    17. .tv1{ 
      18. 
  
  
  
  
    18.     width: 70px; 
      19. 
  
  
  
  
    19.     height: 70px; 
      20. 
  
  
  
  
    20.     font-size: 60px; 
      21. 
  
  
  
  
    21.     font-weight: bold; 
      22. 
  
  
  
  
    22.     text-align: center; 
      23. 
  
  
  
  
    23.     border:3px solid darkgray; 
      24. 
  
  
  
  
    24.     border-radius: 35px; 
      25. 
  
  
  
  
    25.     background-color: white; 
      26. 
  
  
  
  
    26.     color:darkgrey ; 
      27. 
  
  
  
  
    27. } 
      28. 
  
  
  
  
    28. .tv2{ 
      29. 
  
  
  
  
    29.     width: 70px; 
      30. 
  
  
  
  
    30.     height: 70px; 
      31. 
  
  
  
  
    31.     font-size: 50px; 
      32. 
  
  
  
  
    32.     font-weight: bold; 
      33. 
  
  
  
  
    33.     text-align: center; 
      34. 
  
  
  
  
    34.     border:4px solid #FFB964; 
      35. 
  
  
  
  
    35.     border-radius: 35px; 
      36. 
  
  
  
  
    36.     background-color: #FFB964; 
      37. 
  
  
  
  
    37.     color: white; 
      38. 
  
  
  
  
    38. } 
      39. 
  
  
  
  
    39. .inputview{ 
      40. 
  
  
  
  
    40.     width: 200px; 
      41. 
  
  
  
  
    41.     height: 100%; 
      42. 
  
  
  
  
    42.     background-color: white; 
      43. 
  
  
  
  
    43.     font-weight: bold; 
      44. 
  
  
  
  
    44.     font-size: 50px; 
      45. 
  
  
  
  
    45.     margin-left: 30px; 
      46. 
  
  
  
  
    46. } 
      47.

     6.效果呈现:

    这里用到的 input 的type属性的文本字段和密码字段.利用这两个可以制作一个登录页面。

    大家都知道在点击输入框时光标会闪烁,也即是需要获取焦点.而获取焦点的事件是 onfocus.取消焦点事件为onblur. 当我们点击input的父容器时就获得焦点,也就可以输入字段,为了更直观的看到获取焦点成功,我设置了图标的颜色,未获取时图标为灰色,获取成功后为红色.如下图：

    placeholder是用户名密码框未输入内容时,默认显示的灰色文字。当未输入字段时显示，当在输入字段获得焦点时消失。

    js业务逻辑层:

     
 
 
 
      
  
  
  
  
    1. export default { 
      2. 
  
  
  
  
    2.     data: { 
      3. 
  
  
  
  
    3.         title: 'World', 
      4. 
  
  
  
  
    4.         flag:false, 
      5. 
  
  
  
  
    5.     }, 
      6. 
  
  
  
  
    6.     click(){ 
      7. 
  
  
  
  
    7.         this.flag=true; 
      8. 
  
  
  
  
    8.     }, 
      9. 
  
  
  
  
    9.     click1(){ 
      10. 
  
  
  
  
    10.         this.flag=false; 
      11. 
  
  
  
  
    11.     } 
      12. 
  
  
  
  
    12. } 
      13.

     视图层:

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.          
      4. 
  
  
  
  
    4.           
      5. 
  
  
  
  
    5.     
     
  •      
  •          
  •           
  •      
  •      
  •         登录 
  •      
  •  

    •  css属性设置:

     
 
 
 
      
  
  
  
  
    1. .container { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     width: 100%; 
      4. 
  
  
  
  
    4.     height: 1200px; 
      5. 
  
  
  
  
    5.     display: flex; 
      6. 
  
  
  
  
    6.     justify-content: center; 
      7. 
  
  
  
  
    7.     align-items: center; 
      8. 
  
  
  
  
    8.     flex-direction: column; 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10. .one{ 
      11. 
  
  
  
  
    11.     width: 80%; 
      12. 
  
  
  
  
    12.     height: 150px; 
      13. 
  
  
  
  
    13.     background-color: rgb(242, 243, 247); 
      14. 
  
  
  
  
    14.     border-radius: 100px; 
      15. 
  
  
  
  
    15.     margin: 20px; 
      16. 
  
  
  
  
    16.     display: flex; 
      17. 
  
  
  
  
    17.     align-items: center; 
      18. 
  
  
  
  
    18. } 
      19. 
  
  
  
  
    19. .img1{width: 80px; 
      20. 
  
  
  
  
    20.     height: 80px; 
      21. 
  
  
  
  
    21. } 
      22. 
  
  
  
  
    22. .input1{ 
      23. 
  
  
  
  
    23.     height: 100%; 
      24. 
  
  
  
  
    24.     font-size: 50px; 
      25. 
  
  
  
  
    25.     focus-color: rgb(109, 131, 170); 
      26. 
  
  
  
  
    26. } 
      27. 
  
  
  
  
    27. .bottom{ 
      28. 
  
  
  
  
    28.     width: 280px; 
      29. 
  
  
  
  
    29.     height: 280px; 
      30. 
  
  
  
  
    30.     border-radius: 140px; 
      31. 
  
  
  
  
    31.     background-color: rgb(192, 192, 190); 
      32. 
  
  
  
  
    32.     margin: 60px; 
      33. 
  
  
  
  
    33.     font-size: 100px; 
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35. } 
      36. 
  
  
  
  
    36. .but{ 
      37. 
  
  
  
  
    37.     display: flex; 
      38. 
  
  
  
  
    38.     justify-content: center; 
      39. 
  
  
  
  
    39.  
      40. 
  
  
  
  
    40. } 
      41.

    欢迎读者朋友订阅我的专栏:[HarmonyOS开发从0到1]

    https://harmonyos./column/35

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

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

    https://harmonyos./#zz

    网站题目：鸿蒙JS开发14自定义构建购物计算组件&表单组件
    当前网址：http://www.shufengxianlan.com/qtweb/news29/125129.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站设计公司知识

    同城分类信息

    app软件开发公司　　 　上海除甲醛　　 　绵阳服务器托管　　 　网站优化公司　　 　网站设计制作　　 　成都机柜租用　　 　java虚拟主机　　 　成都移动服务器托管　　 　四川审计公司　　 　贵阳托管服务器　　 　格蓝特设备　　 　成都小程序开发　　 　电信机房托管　　 　定制网站开发　　 　Android开发　　 　簇桥薇薇新娘　　 　成都宣传海报　　 　营销网站定位　　 　温江电信机房　　 　成都商城app开发