# danmu

**Repository Path**: kk90/danmu

## Basic Information

- **Project Name**: danmu
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-10
- **Last Updated**: 2021-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 弹幕组件

## 介绍
OpenHarmony的JavaScript组件库,实现拖动的拼图验证功能
- 项目名称：弹幕组件
- 项目源地址：https://gitee.com/kk90/danmu
- 所属系列：OpenHarmony下的的JS 自定义组件开发示例
- 开发版本：OpenHarmony-SDK-2.0-Canary , DevEco Studio2.2 Beta1
- Demo来源：《鸿蒙操作系统应用开发实践》


## 效果

 ![screenshots](screenshots/overview.gif) 
 
 
## 使用说明
### 目录
当前代码目录如下所示：
1.  组件：在entry\src\main\js\default\common\component\danmu中，包含定义组件的hml、css、js文件
2.  demo: 在entry\src\main\js\default\pages\index中，定义了domo页面，使用了弹幕组件。

### 使用

#### 1.  页面hml引入
 ```
   <element name="danmu" src="../../common/components/danmu.hml"></element>
 ```

#### 2.  在页面hml中使用组件：
传入组件需要的弹幕值
 ```
     <danmu danmu-obj="{{ $item }}"></danmu>
 ```

#### 3.  页面的JS：
在页面的js中定义组件的属性：
```
    // 弹幕组件需要的参数类 包含弹幕内容、位置、颜色、大小、是否显示（默认显示）
    class Danmu {
        constructor(content, location, color,  size = 14, speed = 5,  show = true) {
            this.content = content
            this.location = location
            this.color = color
            this.speed = speed
            this.size = size
            this.show = show
        }
    }
```

##### 组件 props

| 属性名称           |  值类型   | 描述       |
| ---------------- | ------- | ----------- |
| content         | String   | 弹幕内容    |
| location        | String  | 弹幕距离顶部位置       |
| color        | String  | 弹幕距离顶部位置       |
| size        | String  | 弹幕文字大小      |
| speed        | String  | 弹幕速度      |
| show        | String  | 是否显示弹幕      |