（未完）7天快速上手OpenHarmony应用开发 | Day4 JS FA、常用组件和自定义组件（一）

学习来源
前置是一些前端的东西
基于之前创建的项目开发一个最常见的表单

一、Text

文本组件，用于呈现一段文本信息
支持Span子组件

1.创建Text组件

在pages/second目录下.hml文件中创建一个Text组件

<text style="front-size: 30px; margin-bottom: 20px; margin-top: 100px">
</text>

2.Span子组件

使用Span子组件时，Text组件内不能存在文本内容
在上面的Text组件中创建

<text style="front-size: 30px; margin-bottom: 20px; margin-top: 100px">
	<span> Form 表单学习</span>
</text>

二、Input

交互式组件，用于接收用户数据。
其类型可设置为日期、多选框、按钮等

1.创建Input组件

还是在刚在Text组件下面
（在一个.hml文件中就行）

<input type="text" placeholder="输入内容." style="margin-top: 50px;"></input>

2.设置Input类型

通过设置属性定义Input类型，如将Input设置为button、date等

<div>
	<style="width: 90%;align-items: center;justify-content:space-between;margin: 40px;">
	<input type="submit">提交</input>
	<input type="reset">重置</input>
</div>

三、Button

按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮

<input type="button" value="{{ $t('strings.back')}}" onclick="onclick"></input>

到这里就是这样

下面的就时在另一个文件中了

四、List

用来显示列表的组件
包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据

1.创建List组件

在pages/index目录下.hml文件中创建一个List组件
（这里把之前的注释掉了）

<div class="container" onswipe="touchMove">
    <!--<text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <input class="btn" type="button" value="{{ $t('strings.next') }}" onclick="onclick"></input>
    -->
    <list>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
    </list>
</div>

在.css文件中创建子组件
展示列表地具体项
实现列表分组功能，可以嵌套，不能再嵌套

.container{
    flex-direction: column;
    align-items:center;
    background-color:#F1F3F5;
}
.listItem{
    height: 20%;
    background-color: #d2e0e0;
    margin-top:20px;
}

2.添加滚动条

设置scrollbar属性为on即可再屏幕右侧生成滚动条，实现长列表或屏幕滚动等效果
在.hml文件中再添加两个表单项
在list组件的属性中添加

<div class="container" onswipe="touchMove">
    <!--<text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <input class="btn" type="button" value="{{ $t('strings.next') }}" onclick="onclick"></input>
    -->
    <list class="listCss" scrollbar="on">
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
    </list>
</div>

在.css文件中添加

.listCss{
    height:100%;
    scrollbar-color: #8e8b8b;
    scrollbar_width:50px;
}

Picker

滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、日期时间选择器、多列文本选择器
在刚才的基础上加入Picker

<!--index.hml-->
<div class="container" onswipe="touchMove">
    <!--<text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <input class="btn" type="button" value="{{ $t('strings.next') }}" onclick="onclick"></input>
    -->
    <picker id="picker_text" type="text" value="{{textvalue}}" range="{{rangetext}}" class="pickertext"></picker>
    <picker id="picker_date" type="data" value="{{datevalue}}" lunarswitch="true" start="2002-2-5" end="2030-6-5" class="pickerdate"></picker>
    <list class="listCss" scrollbar="on">
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
        <list-item class="listItem"></list-item>
    </list>
</div>

在.css，.js文件中加入子组件

普通选择器设置取值范围时，需要使用数据绑定方式
日期选择器的lunarswitch属性只支持手机和平板设备

六、Dialog（重点）

创建自定义弹窗
通常用来展示用户当前需要或用户必须关注的信息或操作

1.创建Dialog组件

在pages/index目录下.hml文件中创建一个Dialog组件，并添加Button组件来出发Dialog。
Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式

<!--index.hml-->
<div class="container" onswipe="touchMove">
    <!--<text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <input class="btn" type="button" value="{{ $t('strings.next') }}" onclick="onclick"></input>
    -->
    <div class="doc-page">
        <dialog class="dialogClass" id="dialogId">
            <div class="content">
                <text>this is a dialog</text>
            </div>
        </dialog>
        <button value="click me" onclick="openDialog"></button>
    </div>
</div>

.css

.doc-page{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background-color:#F1F3F5;
}
.diaogClass{
    width: 80%;
    height:250px;
    margin-start:1%;
}
.content{
    width:100%;
    height:100%;
    text-align:center;
}
text{
    width: 100%;
    height: 100%;
    text-align: center;
}
button{
    width:70%;
    height:60px;
}

.js

export default {
    data: {
        rangetext:['15',"20","25"],
        textvalue:'Select text',
        datevalue:'Select date',
        title: ""
    },
    openDialog(){
        this.$element('dialogId').show()
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    onclick: function () {
        router.replace({
            uri: "pages/second/second"
        })
    }
}

2.设置弹窗响应

开发者点击页面上非Dialog区域时，将触发cancel事件而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。
仅支持单个组件
Dialog属性、样式均不支持动态更新
Dialog组件不支持focusable、click-effect属性

<div class="container" onswipe="touchMove">
    <!--<text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <input class="btn" type="button" value="{{ $t('strings.next') }}" onclick="onclick"></input>
    -->
    <div class="doc-page">
        <dialog class="dialogClass" id="dialogId">
            <div class="dialogDiv">
                <text>dialog</text>
                <botton value="confirm" onclick="confirmClick"></botton>
            </div>
            <div class="content">
                <text>this is a dialog</text>
            </div>
        </dialog>
        <button value="click me" onclick="openDialog"></button>
    </div>
</div>

七、Form组件（重点）

一个表单容器，支持容器内input组件内容的提交和重置

1.创建Form组件

在page/second目录下.hml文件中创建一个Form组件

2.添加响应事件

为Form组件添加submit和reset事件，提交表单内容或重置表单选项