> 文档中心 > 鸿蒙组件应用实例

鸿蒙组件应用实例


该部分提供部分组件的使用情况


目录

前言

一、组件是什么?

二、组件

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提供了大量能使我们快速便捷地处理数据的函数和方法。