鸿蒙组件应用实例
该部分提供部分组件的使用情况
目录
前言
一、组件是什么?
二、组件
1.用渲染属性实现注册信息页面效果
2.button组件
总结
前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、组件是什么?
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
二、组件
1.用渲染属性实现注册信息页面效果
css:
.container { flex-direction: column; align-items: center; width: 100%; height: 100%;}.title { font-size: 40px; color: #ff00ff;}
html:
注册信息
css:
export default { data: { infos: ["姓名","籍贯","身份证号码","电话号码"], colors:["red","green","blue","gray"] },}
效果如下:
2.button组件
htm:
css:
.container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; left: 0px; top: 30px; width: 100%; height: 100%;}.title { font-size: 38px; text-align: center; width: 100%; margin: 10px;}
效果如下:
3.事件
3.1说明
实现如下图3.1所示的页面效果,并用冒泡排序实现单击最内层的正方形,触发最内层div绑定的c3click事件、中间层div组件绑定的c2click事件和最外层div组件绑定的c1click事件;单击中间层的正方形,触发中间层组件绑定的c2click事件和最外层div组件绑定的c1click事件。
图3.1
3.2事件代码
css:
.container1 { display: flex; justify-content: center; align-items: center; background-color: red; width: 400px; height: 400px;}.container2 { display: flex; justify-content: center; align-items: center; background-color: yellow; width: 200px; height: 200px;}.container3 { background-color: blue; width: 100px; height: 100px;}
html:
js:
export default { c1click(e) { console.info("这是最外层的单击事件") }, c2click(e) { console.info("这是中间层的单击事件") }, c3click(e) { console.info("这是最内层的单击事件") }}
4.事件对象
当作用于组件的动作触发事件时,逻辑层绑定该事件的处理函数都会收到一个事件对象,通过该事件对象可以获取相应的信息。(API6+支持dataSet属性,组件上通用属性由data*设置)
在3的基础上绑定属性值。
代码如下:
html:
js:
export default { c1click(e) { console.info(e.target.dataSet.c1) console.info("这是最外层的单击事件") }, c2click(e) { console.info(e.target.dataSet.c2) console.info("这是中间层的单击事件") }, c3click(e) { console.info(e.target.dataSet.c3) console.info("这是最内层的单击事件") }}
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。