ECN-c1aris/Weapp-Demo-Inputbox-行业智能，新时代，新科技，新码农

# Weapp-Demo-Inputbox

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Language](https://img.shields.io/badge/javascript-ES6-orange.svg)](https://www.javascript.com/)
[![GitHub last commit](https://img.shields.io/github/last-commit/c1aris/Weapp-Demo-Inputbox.svg)](https://github.com/c1aris/Weapp-Demo-Inputbox/commits/master)
[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/c1aris/Weapp-Demo-Inputbox.svg?colorB=fa5b19)](https://github.com/c1aris/Weapp-Demo-Inputbox)

最近开发微信小程序的过程中需要用到弹出输入框的功能，但是官方并没有提供相关的组件，索性自己模仿原生的样式和动画写了一个，内部布局和配色都是一点一点慢慢调的，动画部分采用 CSS 动画实现，力求与原生组件完美契合

## 效果展示

## 使用方法

* 首先点击右上角 `?Star` ʕ •ᴥ•ʔ
* 获取组件代码
    * 执行 `git clone https://github.com/c1aris/Weapp-Demo-Inputbox.git`
    * 或 [点击此处](https://github.com/c1aris/Weapp-Demo-Inputbox/releases) 下载最新版本的代码
* 解压后将 `components/inputBox` 文件夹复制到目标工程的 `components` 文件夹内（若不存在则在根目录创建一个）
* 配置页面设置：在需要使用该组件的页面的 `xxx.json` 文件中添加如下字段：

```
  {
    "usingComponents": {
      "inputBox": "/components/inputBox/inputBox"
    }
  }
  ```

* 在需要使用该组件的页面的 `xxx.wxml` 文件中合适位置添加 `<inputBox>` 标签和相关参数即可

## 参数列表

* 调用实例：

```html
<inputBox title='输入框标题'
          multiline
          placeholder='(输入框占位符)'
          maxlength='140'
          bindinputCancel='onInputCancel'
          bindinputConfirm='onInputConfirm'
          wx:if='{{ showMultilineInputbox }}'>
</inputBox>
```

## 目录结构

```
┌── components                      自定义组件目录
│   └── inputBox                        自定义组件
│       ├──  inputBox.js                    组件逻辑
│       ├──  inputBox.json                  组件设置
│       ├──  inputBox.wxml                  组件结构
│       └──  inputBox.wxss                  组件样式表
├── pages                           页面目录
│   └── index                           首页页面
│       ├──  index.js                       页面逻辑
│       ├──  index.json                     页面设置
│       ├──  index.wxml                     页面结构
│       └──  index.wxss                     页面样式表
├── app.js                          小程序逻辑
├── app.json                        小程序公共设置
├── app.wxss                        小程序公共样式表
└── project.config.json             工具配置
```

## License

[MIT License](LICENSE)