本章目标：

1 了解组件的属性、事件和方法等概念

2 了解常用容器组件弹窗Dialog的基本用法

我们在前面的章节中已经用到了一些组件，也用到了它们的属性和事件，这一章我们就来专门讲一讲它们。

一 属性

组件的属性是指组件的一些特性，例如前面章节中用到的class（组件的样式类，用于引用样式）;按钮button的type（按钮的类型），value（按钮的文本值）等，如下所示：

<text class="text">Hello World</text>

<button class="button" type="capsule" value="Next"></button>

鸿蒙应用开发中的组件有一些通用属性，下面来介绍一下：

1 常规属性

常规属性指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。

名称

类型

默认值

必填

描述

id

string

-

否

组件的唯一标识。

style

string

-

否

组件的样式声明。

class

string

-

否

组件的样式类，用于引用样式表。

ref

string

-

否

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

disabled

boolean

false

否

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

focusable

boolean

false

否

当前组件是否可以获取焦点。 当focusable设置为true时，组件可以响应焦点事件和按键事件。当组件额外设置了按键事件或者点击事件时，框架会设置该属性为true。

data

string

-

否

给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：

在事件回调中使用 e.target.attr.data 读取数据，e为事件回调函数入参。使用$element或者$refs获取DOM元素后，通过attr.data 进行访问。

说明

从API Version 6 开始，建议使用data-*。

data-*6+

string

-

否

给当前组件设置data-*属性，进行相应的数据存储和读取。大小写不敏感，如data-A和data-a默认相同。JS文件中：

在事件回调中使用 e.target.dataSet.a读取数据，e为事件回调函数入参。使用$element或者$refs获取DOM元素后，通过dataSet.a进行访问。

click-effect5+

string

-

否

通过这个属性可以设置组件的弹性点击效果，当前支持如下三种效果：

spring-small：建议小面积组件设置，缩放(90%)。spring-medium：建议中面积组件设置，缩放(95%)。spring-large：建议大面积组件设置，缩放(95%)。

dir6+

string

auto

否

设置元素布局模式，支持设置rtl、ltr和auto三种属性值：

rtl：使用从右往左布局模式。ltr：使用从左往右布局模式。auto：跟随系统语言环境。

2 渲染属性

组件普遍支持的用来设置组件是否渲染的属性。

名称

类型

默认值

描述

for

Array

-

根据设置的数据列表，展开当前元素。

if

boolean

-

根据设置的boolean值，添加或移除当前元素。

show

boolean

-

根据设置的boolean值，显示或隐藏当前元素。

说明：属性和样式不能混用，不能在属性字段中进行样式设置，也不能在样式设置使用属性字段。

除了用属性直接设置组件的外观，我们还可以用样式对组件外观进行定义。

这里很容易把样式和属性弄混淆，所以我们就专门来先了解下样式的概念，后面还会有章节专门讲解。

3 样式

样式是用来设置组件的外观的，通常在css文件中定义。常用的通用样式有组件的宽度,高度，边距，边框，背景，透明度，可见性等。

（1）宽度和高度：通过width和height属性可以设置组件的宽度和高度。

（2）边距：通过padding和margin属性可以设置组件的内边距和外边距。当然，还可以通过像素与padding-top等形式指定某个方向的边距。

（3）边框：通过border属性可以定义边框的宽度、样式和颜色，也可以分别通过border-width、border-style、border-color、border-radius定义边框的宽度、样式、颜色、圆角半径等。

（4）背景：通过background、background-color、background-image等属性可以定义背景样式。

另外，还可以通过opacity属性定义组件的透明度；通过display属性来定义组件为弹性布局（flex）或者不渲染（none）；通过visibility属性定义组件的可见性等。

二 事件

事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互。

事件主要为手势事件和按键事件。手势事件主要用于智能穿戴等具有触摸屏的设备，按键事件主要用于智慧屏设备。

1 手势事件

手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。支持的事件有：

触摸

touchstart：手指触摸动作开始。

touchmove：手指触摸后移动。

touchcancel：手指触摸动作被打断，如来电提醒、弹窗。

touchend：手指触摸动作结束。

点击

click：用户快速轻敲屏幕。

长按

longpress：用户在相同位置长时间保持与屏幕接触。

2 按键事件

按键事件是智慧屏上特有的手势事件，当用户操作遥控器按键时触发。用户点击一个遥控器按键，通常会触发两次key事件：先触发action为0，再触发action为1，即先触发按下事件，再触发抬起事件。action为2的场景比较少见，一般为用户按下按键且不松开，此时repeatCount将返回次数。每个物理按键对应各自的按键值（keycode）以实现不同的功能。

组件在绑定事件时，需要在事件名称前加on或者“@”来标示事件。例如我们前面章节中用到的button的点击事件：

<button class="button" type="capsule" value="Next" onclick="launch"></button>

我们也可以用“@”来绑定事件，如：

<button class="button" type="capsule" value="Next" @click="launch"></button>

对于按键事件来讲，可以通过KeyEvent对象的code属性来判断操作的按键类型，通过action属性来判断按键的操作。例如，当按下遥控器的确认键时才进行处理，代码如下：

onEnterKeyDown(keyevent){

// 当按下确认键时进行处理

if (keyevent.code == 23 && keyevent.action ==0) {

doSomething();

}

}

智慧屏遥控器常用的按键值：

数值

行为

物理按键

19

上

向上方向键

20

下

向下方向键

21

左

向左方向键

22

右

向右方向键

23

确定

智慧屏遥控器的确认键

66

确定

键盘的回车键

160

确定

键盘的小键盘回车键

三 方法

通过组件方法我们可以对组件进行控制。例如，我可以通过Dialog(对话框)组件的show()和close()方法来弹出和关闭对话框。

this.$element('dialog').show();this.$element('dialog').close();

最后，我们通过项目实例来熟悉一下本章的知识。

四 容器组件Dialog（弹窗）

下面我们以常用容器组件Dialog为例来熟悉我们本章的知识。

本实例中有一个按钮，点击按钮会打开一个对话框，点击对话框的确定按钮关闭对话框。

具体实现步骤如下：

1 启动DevEco Stuidio，打开之前的项目或者新建一个项目都行。为了方便起见，这里就直接使用上一章「华为鸿蒙应用开发 6」JavaScript UI组件概述及常用组件List中的项目Component。进到到项目的编辑界面

2 打开index.hml文件，写入如下代码

<!-- index.hml --><div class="container">    <button class="button" type="capsule" value="点击我" @click="showDialog"></button>    <dialog id="dialog" style="margin-bottom: 50%;">        <div class="dialog-div">            <div class="title-div">                <text class="title">标题</text>            </div>            <text class="text">显示提示的内容</text>            <div class="inner-btn">                <button type="text" value="确定" onclick="hideDialog" class="btn-txt"></button>            </div>        </div>    </dialog></div>

3 打开index.css文件，写入如下代码

.container {    flex-direction: column;    justify-content: center;    align-items: center;}.button {    width: 200px;    height: 80px;    font-size: 40px;}.dialog-div {    flex-direction: column;    align-items: center;}.title-div {    width: 80%;    height: 100px;    align-items: center;    flex-direction: column;    justify-content: space-around;}.title {    font-size: 18px;    color: #000000;    font-weight: bold;}.text {    font-size: 16px;}.inner-btn {    width: 80%;    height: 100px;    align-items: center;    justify-content: space-around;}

4 打开index.js文件，写入如下代码

export default {    showDialog() {        this.$element('dialog').show();    },    hideDialog() {        this.$element('dialog').close();    }}

5 在预览器（Previewer）中运行程序，效果如下：

最后，敲黑板：多看，多思考，多动手！代码一定要亲自动手敲出来！