鸿蒙组件应用实例

在潜水的伊尔

已于 2023-05-12 20:56:01 修改

阅读量194

点赞数

文章标签： harmonyos 华为

于 2023-05-12 18:32:37 首次发布

本文链接：https://blog.csdn.net/m0_62791767/article/details/130629327

版权

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

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件是什么？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、组件

1.用渲染属性实现注册信息页面效果

css：

.container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 40px;
    color: #ff00ff;
}

html:

<div class="container">
   <text class="title">注册信息</text>
    <input for="{{infos}}" placeholder="请输入{{$item}}" style="background-color: {{colors[$idx]}};"></input>
</div>

css:

export default {
    data: {
        infos: ["姓名","籍贯","身份证号码","电话号码"],
        colors:["red","green","blue","gray"]
    },
}

效果如下：

2.button组件

htm：

<div class="container">
   <button value="缺省按钮"></button>
    <button type="text" value="文本按钮"></button>
    <button type="capsule" value="胶囊按钮"></button>
    <button type="circle" value="圆形按钮"></button>
    <button type="arc" value="圆弧按钮">圆弧按钮</button>
    <button type="download" value="进度按钮">进度按钮</button>
</div>

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:

<div class="container1" @click="c1click">
  <div class="container2" @click="c2click">
   <div class="container3" @click="c3click">
   </div>
  </div>
</div>

js:

export default {
    c1click(e) {
        console.info("这是最外层的单击事件")
    },
    c2click(e) {
        console.info("这是中间层的单击事件")
    },
    c3click(e) {
        console.info("这是最内层的单击事件")
    }
}

4.事件对象

当作用于组件的动作触发事件时，逻辑层绑定该事件的处理函数都会收到一个事件对象，通过该事件对象可以获取相应的信息。（API6+支持dataSet属性，组件上通用属性由data*设置）

在3的基础上绑定属性值。

代码如下:

html:

<div class="container1" data-c1="400" @click="c1click">
  <div class="container2" data-c2="200" @click="c2click">
   <div class="container3" data-c3="100" @click="c3click">
   </div>
  </div>
</div>

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("这是最内层的单击事件")
    }
}