# weapp-input-frame

**Repository Path**: hihopeorg/weapp-input-frame

## Basic Information

- **Project Name**: weapp-input-frame
- **Description**: 输入框组件，适用于支付密码、登录密码等
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-14
- **Last Updated**: 2022-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# input-frame

## 项目简介

input-frame 是一个输入框组件，适用于支付密码、登录密码等

## 效果演示
![gif](preview.gif)

#### 下载安装

1. 参考安装教程 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md)
2. 安装命令如下：
 ```
 npm install @ohos/input_frame --save
 ```

## 使用说明：

第一步： 在hml文件中引入input-frame组件；
```html
    <element name="input-frame" src='../input-frame/index.hml'></element>
```

第二步：在hml文件中写入：
```html

    <input-frame
                value=""
                frame-style="divider"
                focus="{{ true }}"
                space="{{6}}"
                @change="onChange"
                @finished="onFinished"
                ></input-frame>

```
第三步：在js文件添加title属性，onFinished方法和onChange方法
```javascript

         data: {
             title: 'World'
         },
         onFinished(value){
             console.log("onFinished="+JSON.stringify(value));
         },
         onChange(value){
             console.log("onChange="+JSON.stringify(value));
         }

```

 - 注意:导入请求入口js文件时需要根据自己的项目路径;具体详细使用方法可查看项目的案例。


## 兼容性

支持OpenHarmony  API version 8 及以上版本

## 目录结构

```
|---- input_frame  
|   |---- src
|     |---- main
|       |---- js
|          |---- common
|            |---- input_frame  
|              |---- index.css   # 样式表
|              |---- index.hml   # UI 核心代码文件
|              |---- index.js    # 交互文件
|---- README.md  # 安装使用方法
```

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/weapp-input-frame/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/weapp-input-frame/pulls) 。

## 开源协议
本项目基于 [MIT License (MIT)](https://gitee.com/hihopeorg/weapp-input-frame/blob/master/LICENSE) ，请自由地享受和参与开源。