# OpenHarmony-JS-Icon
**Repository Path**: chenqiao002/open-harmony-js-icon
## Basic Information
- **Project Name**: OpenHarmony-JS-Icon
- **Description**: 基于OpenHarmony下的JavaScript UI框架，通过使用常用组件、画布组件和自定义组件等来实现一个自定义的icon组件
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 12
- **Forks**: 3
- **Created**: 2021-08-04
- **Last Updated**: 2022-09-06
## Categories & Tags
**Categories**: harmonyos-image
**Tags**: None
## README
# OpenHarmony-JS-Icon
本示例基于OpenHarmony下的JavaScript UI框架，通过使用常用组件、画布组件和自定义组件等来实现一个自定义的icon组件，通过本示例可以基本了解和使用该组件。
本项目是基于OpenHarmony项目而不是HarmonyOS项目，请注意运行环境。
**请参考[OpenHarmony项目配置方法](https://gitee.com/isrc_ohos/ultimate-harmony-reference/blob/master/OpenHarmony%20JS%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.md)进行项目配置和运行。**
如果你不熟悉OpenHarmony的JS开发，**请参考该项目的[开发讲解](https://gitee.com/isrc_ohos/ultimate-harmony-reference/blob/master/OpenHarmony%20JS%20Demo%E5%BC%80%E5%8F%91%E8%AE%B2%E8%A7%A3.md)。**
## 项目介绍
* 项目名称：OpenHarmony-JS-Icon
* 项目源地址：[https://gitee.com/chenqiao002/open-harmony-js-icon](https://gitee.com/chenqiao002/open-harmony-js-icon)
* 所属系列：OpenHarmony下的的JS 自定义组件开发示例
* 开发版本：OpenHarmony-SDK-6，DevEco Studio 2.2.0.200
* Demo来源：《鸿蒙操作系统应用开发实践》
* 项目作者和维护人：陈乔
* 邮箱：chenqiao002@chinasoftinc.com
## 目录
1. 在Pages目录下，只有一个index首页，在首页中展示了icon自定义组件的使用样例。
2. 在common文件夹下的icon文件夹是自定义的icon组件，在icon文件夹中js文件夹是icon绘制使用到的方法和数据。
## 使用说明
### 项目预览
1. 下载OpenHarmony-JS-Icon项目，启动 DevEco Studio并打开工程。
2. 进入entry->src->main->js->default->pages->index，打开index.hml。
### 引入
在index.hml的第一行，引用自定义组件，这里我们将name属性设置为icon。
```
```
### 基础用法
通过设置icon组件的name属性来展示不同的图标。
```
```
### 角标提示
通过设置icon组件的badge-config属性来对角标信息进行设置。
```hml
```
```js
badgeConfig: {
config: {
badgeColor: "#0a59f7",
textColor: "#ffffff",
},
count: 0,
visible: true,
},
```
### 图标颜色和背景颜色
通过设置icon组件的color属性来设置，background-color可以设置图标的背景颜色。
```
```
### 图标大小
通过设置icon组件的size属性来控制图标的大小。
```
```
### 图标禁用
通过设置icon组件的disabled属性控制图标是否禁用，disabled默认为false，禁用状态设置为true时图标为灰色，color和badge-config属性只有在disabled为false时生效。
```
```
### 图片绘制
通过设置icon组件的name属性设置为图片的地址。
```
```
## API
### props
| 属性名称 | 值类型 | 描述 |
| ---------------- | ------- | ------------------------------------------------------------ |
| name | String | icon 名称 |
| class-prefix | String | icon 样式前缀（目前无效果） |
| size | Number | icon 尺寸，默认大小24px，元素是一个正方形 |
| color | String | icon 颜色，默认#333333，可以使用16进制和rgba |
| background-color | String | icon 背景颜色，默认#FFFFFF，可以使用16进制和rgba |
| badge-config | Object | icon 角标配置，详细配置参考[官方文档 ](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-badge-0000001060267851) |
| disabled | Boolean | icon 禁用配置，默认false |
| dataClick | any | icon 自定义点击事件绑定数据，默认为null |
代码示例：
```javascript
export default {
props: {
// icon 名称
name: {
default: ''
},
// icon 样式前缀
classPrefix: {
default: 'hos-icon'
},
// icon 尺寸
size: {
default: 24,
},
// icon 颜色
color: {
default: "#333333"
},
// icon 背景颜色
backgroundColor: {
default: "#ffffff"
},
// 角标配置
badgeConfig: {
default: {
config: {
badgeColor: "#0a59f7",
textColor: "#ffffff",
},
placement: "rightTop",
count: 0,
maxcount: 99,
visible: false,
label: "",
}
},
// icon 图标禁用
disabled: {
default: false
},
// icon 点击方法携带的参数
dataClick: {
default:
}
}
}
```
### Events
| 方法名称 | 参数 | 描述 |
| -------- | --------- | ------------------------------------------------------------ |
| click | dataClick | 自定义的点击事件调用方法，默认参数为null，在disabled属性为true的时候不会触发此方法 |
代码示例：
hml文件，icon组件绑定点击事件和绑定点击实现参数：
```xml
```
js文件，在iconClick方法上接收参数的detail属性为绑定的数据：
```javascript
iconClick(data) {
console.log("iconClick");
console.log(data.detail);
}
```
执行结果：
## 注意事项
1. 可以使用角标，使用时需将所有的badge属性作为一个对象用badge-config名称传入，这个用法参考了官方badge组件。
2. 可以绘制图片，在name属性上设置图片路径，路径必须是绝对路径或者云路径，不能使用"./"或者"../"等开头的相对路径，而且图片尺寸需和icon的size值一样，不然可能会导致绘制不完整，官方有image组件，这个功能有点鸡肋。
3. 虽然图标颜色可以设置透明色，但是不建议设置透明色，透明色可能会导致部分图标绘制的效果与预期相差较大。
4. 图标的形式参考了市面上主流的图标形式，全部的图标绘制均为canvas绘制，无任何代码参考，使用的api均为鸿蒙JS UI官方api。
5. 图标绘制使用的是canvas，虽然在一些特别细节的地方可能还比不上矢量图标清晰度，但是此库理论上可以实现任意图标，大家有需求或者有新的图标需要绘制的请评论留言，谢谢。
6. 目前图标已绘制了230+，已基本完成计划实现的图标，还会继续更新，敬请关注。
## 版权和许可信息
OpenHarmony-JS-Icon经过Apache License, version 2.0授权许可。