组件适配列表

[Chen-jj]

需要实现的组件及其属性、事件。

可以分为两种实现方式：

1. 简单的属性、事件名映射，可以直接修改模板，使用鸿蒙基础组件即可。

2. 需要对属性、事件、样式等行为进行封装时，使用自定义组件进行封装。

一、视图容器

1. View

无设置属性的 <View> 直接映射为鸿蒙的 <div> 组件。

后续可以考虑使用自定义组件实现带属性的 <View>。

2. ScrollView

使用 <div> 去实现。

属性

• scrollX
• scrollY
• scrollTop
• scrollLeft
• scrollWithAnimation

事件

• onScrollToUpper
• onScrollToLower

3. Swiper

使用鸿蒙的 <swiper> 组件去实现。

属性

• indicatorDots
• indicatorColor
• indicatorActiveColor
• autoplay
• current
• interval
• duration
• circular
• vertical

事件

• onChange

4. SwiperItem

直接映射为鸿蒙的 <div> 组件。

5. CoverView

鸿蒙不存在 “cover” 的概念，经测试 Video 不显示子元素、Canvas 存在子元素时会报错，因此暂时只能直接影射为 <div>。

6. CoverImage

鸿蒙应该不存在 “cover” 的概念，可以考虑修改 <image> 的样式去实现。

二、基础组件

1. Icon

使用鸿蒙的 <div> 组件去实现。

属性

• type
• size
• color

2. Progress

使用鸿蒙的 <progress> 组件去实现。

属性

• percent
• showInfo
• fontSize
• strokeWidth
• activeColor
• backgroundColor

3. Text

直接映射为鸿蒙的 <text> 组件。

三、表单组件

1. Form

直接映射为鸿蒙的 <form> 组件。

事件

• onSubmit
• onReset

2. Input

直接映射为鸿蒙的 <input> 组件。

属性

• value
• type
• password
• placeholder
• maxlength
• focus

事件

• onInput

onFocus、onBlur 挺常用的，需要和鸿蒙沟通是否可以实现

3. Button

使用鸿蒙的 <button> 组件去实现。

属性

• value 鸿蒙的按钮value需要通过参数传值
• size
• type
• plain
• disabled
• loading
• hoverClass
• hoverStartTime(暂不支持)
• hoverStayTime(暂不支持)

4. Checkbox

直接映射为鸿蒙的 <input> 组件。

属性

• value
• checked

5. CheckboxGroup

直接映射为鸿蒙的 <div> 组件。

实现方法参考评论一。

6. Radio

直接映射为鸿蒙的 <input> 组件。

属性

• value
• checked

7. RadioGroup

直接映射为鸿蒙的 <div> 组件。

实现方法参考评论一。

8. Label

直接映射为鸿蒙的 <label> 组件。

属性

• for

9. Picker

使用鸿蒙的 <picker> 组件去实现。

属性

• mode
• range
• value
• start
• end

事件

• onCancel
• onChange
• onColumnChange

10. Slider

使用鸿蒙的 <slider> 组件去实现。

属性

• min
• max
• step
• disabled
• value
• activeColor
• backgroundColor
• blockColor
• showValue

事件

• onChange

11. Switch

直接映射为鸿蒙的 <switch> 组件。

属性

• checked

事件

• onChange

12. Textarea

使用鸿蒙的 <textarea> 组件去实现。

属性

• value
• placeholder
• maxlength
• focus
• autoHeight

事件

• onLineChange
• onInput

四、导航

1. Navigator

使用鸿蒙的 <div> 组件去实现。

属性

• url
• open-type
• delta
• hoverClass
• hoverStartTime
• hoverStayTime

2. NavigationBar

暂未实现：

• 控件（返回、分享、关闭按钮）反色
• 自定义 NavBar 样式（config.navigationStyle）
• 右上角分享按钮逻辑
• 右上角关闭应用逻辑
• API：showNavigationBarLoading、hideNavigationBarLoading、hideHomeButton

3. TabBar

暂未实现：

• 样式：红点、绷带
• API：showTabBarRedDot、hideTabBarRedDot、setTabBarBadge、removeTabBarBadge

五、媒体组件

1. Image

使用鸿蒙的 <image> 组件去实现。

属性

• src
• mode

事件

• onLoad
• onError

2. Video

使用鸿蒙的 <video> 组件去实现。

属性

• src
• muted
• autoplay
• poster
• controls
• loop
• initialTime
• direction

事件

• onPlay
• onPause
• onEnded
• onError
• onFullScreenChange
• onTimeUpdate

3. Camera

使用鸿蒙的 <camera> 组件去实现。

属性

• flash
• devicePosition

事件

• onError

六、画布

1. Canvas

使用鸿蒙的 <canvas> 组件去实现。

七、开放能力

1. WebView

使用鸿蒙的 <web> 组件去实现。

属性

• src

事件

• onLoad
• onError

八、其它

1. Block

直接使用鸿蒙的 <block> 组件。

九、鸿蒙暂不支持

• Audio
• Map

[XingChen002]

第三部分表单组件 CheckboxGroup和RadioGroup可以通过自定义组件实现
具体实现思路
1.封装自定义组件CheckboxGroup和RadioGroup，业务侧CheckboxGroup/RadioGroup指定属性id="xxx"
2.checkbox和radiobox绑定onchange事件，在onchange的方法实现里面通过this.$child("xxx")获取到CheckboxGroup和RadioGroup实例
3.自定义组件实例里面组装对应的选中的值
4.自定义组件将组装的值通过emit触发业务侧CheckboxGroup和RadioGroup绑定的change事件

[XingChen002]

关于TabBar组件可以通过toolbar/toolbar-item封装成自定义组件实现，tab对应的页面处引用自定义组件

[XingChen002]

关于NavigationBar也可以封装自定义组件，对于router导航可以通过router.getLength()判断是否需要展示导航的icon来实现

[XingChen002]

对于scroll-view组件，在Harmony JS FA api6中支持overflow属性，可以通过div去实现类似的功能
1.对于scroll-y，可以通过添加样式overflow: scroll； flex-direction: column;
1.对于scroll-x，可以通过添加样式overflow: scroll； flex-direction: row;
达到类似的scroll-view功能