# Gesture 手势解锁

[toc]

手势解锁组件用于手势绘制密码图案的场景，考虑到该组件数据交换比较复杂，建议将这个页面移植过去，对整个页面进行处理

## 组件引入

在`app.json`中引入：

**app.json中要加上 `"disableScroll": true`，防止页面在拖动时滚动**

```json

// app.json
{
  "disableScroll": true,
  "usingComponents": {
    "tea-gesture": "../dist/gesture/index"
  }
}

```

或在页面`index.json`中引入：

```json

// index.json

{
  "usingComponents": {
    "tea-gesture": "../../dist/gesture/index"
  }
}

```

## 用法

```html
<tea-gesture></tea-gesture>
```

## Props

| 参数             | 描述                | 类型       | 默认值                    |
| -------------- | ----------------- | -------- | ---------------------- |
| id             | canvas外框id        | `String` | `js_gesture_id`        |
| canvasId       | canvas外框canvas id | `String` | `js_gesture_canvas_id` |
| arcRadius      | 外框圆半径             | `Number` | `30`                   |
| smallArcRadius | 内框圆半径             | `Number` | `9`                    |
| gutter         | 圆与圆之间的间隙          | `Number` | `40`                   |
| errorColor     | 手势密码输入错误时显示的颜色    | `String` | `#e54545`              |
| color          | 默认状态时显示的颜色        | `String` | `#6abffc`              |
| lineColor      | 绘制密码时连线的颜色        | `String` | `#28a7ff`              |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## 演示

![gesture](/preview/gesture.png)