js开发14 自定义构建购物计算组件&表单组件 原创 精华
1.前言:
在第九篇文章购物车做好后,还忘记了一个至关重要的计算组件.在鸿蒙的组件中并没有提供这样一个计算功能的组件,因此我们今天来自定义一个,这个组件和之前做的购物车的小项目放在一起.直男缺乏美感,我们就模仿别人的就行:
2.组件介绍:
这里(以后也要用到)要用到一个标签:<input> .这个标签会与表单用在一起,比如搜索框,登录页面等都会用到<input>.input>标签规定用户可输入数据的输入字段.type属性规定 input元素的类型, 根据不同的 type 属性,输入字段有多种形态.输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等,今天所用到的是文本字段、复选框字段和密码字段.
3.js业务逻辑层:
点击事件onclick后,执行+的操作可以没有上限,但执行-操作在实际应用(例如购物车商品的数量)当中一般是减1后就停止.这里我们做一个提示框,用来表示已经减到最小.
4.视图层: 这里type的value可以是接收text,同样也可以是number 读者可以自行尝试
5.css属性设置:
6.效果呈现:
--------------------------------------------------------------------------------分割线-------------------------------------------------------------------------------------------
这里用到的 input 的type属性的文本字段和密码字段.利用这两个可以制作一个登录页面.
大家都知道在点击输入框时光标会闪烁,也即是需要获取焦点.而获取焦点的事件是 onfocus.取消焦点事件为onblur. 当我们点击input的父容器时就获得焦点,也就可以输入字段,为了更直观的看到获取焦点成功,我设置了图标的颜色,未获取时图标为灰色,获取成功后为红色.如下图
placeholder是用户名密码框未输入内容时,默认显示的灰色文字.当未输入字段时显示,当在输入字段获得焦点时消失
js业务逻辑层:
视图层:
css属性设置:
效果展示:
欢迎读者朋友订阅我的专栏:[HarmonyOS开发从0到1]
https://harmonyos.51cto.com/column/35
感谢分享,讲的很详细。
感谢分享,讲的很详细。