更新记录

1.0.0（2024-06-12）

首次提交，大家快来体验吧

平台兼容性

手势图形密码

本组件是基于UniApp + Vue3 + ts + Canvas进行封装的。

基础用法(demo)

<template>
  <view class="index-page">
    <view>密码：{{ pwd }}</view>
    <lee-gesture-password
      :width="width"
      :height="height"
      :circle-width="68"
      line-color="#44FF4E"
      line-background="#fff"
      background="rgba(0,0,0,0.7)"
      @change="onChange"
      @start="startDraw"
    />
  </view>
</template>

<script setup lang="ts">
import LeeGesturePassword from './components/leeGesturePassword.vue'
import { ref } from 'vue'
const width = ref(300)
const height = ref(300)
const pwd = ref('')
const onChange = (data: number[]) => {
  pwd.value = data.join('')
}

const startDraw = () => {
  pwd.value = ''
}
</script>

<style lang="scss" scoped>
.index-page {
  height: 100vh;
  width: 100vw;
  background-color: grey;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

Props(参数)

颜色类的参数支持HEX，RGB，RGBA

Events(事件)