# 12.5 手势密码

此组件为APP内置组件，不需要前端import导入, 可直接在template里使用。

使用上比较简单，通过class设置对应的宽高即可使用。

使用规则

手势密码要求至少由连续的4个点组成，最多9个点。绘制手势时按顺序记录所有经过的九宫格的点，作为手势密码。

实例 :

手势密码

扫码预览

# 基础用法

<template>
  <div class="wrapper">
    <dof-minibar
      title="手势密码"
      background-color="#0092d7"
      text-color="#ffffff"
      :isImage="true"
      :left-button="leftButton"
      right-text="Home"
    ></dof-minibar>
    <scroller class="scroller">
      <div class="note-wrapper">
          <text class="note">手势密码加密的结果是：{{password}}</text>
      </div>
      <midea-gesture-password class="gesture" @finish="onfinish" ></midea-gesture-password>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
    background-color: #f9f9f9;
}
.scroller {
    padding-bottom: 50px;
}
.note-wrapper{ 
  margin-top: 40px;
  margin-bottom: 100px;
  margin-left: 30px;
  margin-right: 30px;
  height: 100px;
}
.note{
  text-align: center;
  font-size: 32px;
  color: grey;
  line-height: 40px;
}
.gesture{
  margin-left: 25px; 
  width: 700px;
  height: 700px;
}
</style>

<script>
import { DofMinibar} from 'dolphin-weex-ui'
export default {
  components: {DofMinibar},
  data: () => ({
    password: '--'
  }),

  methods: {
    onfinish (e) {
        this.password = e.data
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# Events

事件名称	说明	回调参数
`finish`	绘制完一次手势后触发	`e`, `e.data`

← 12.4 弧形进度条 12.6 滑动柄 →