uniapp 绘制手势密码 (支持多端)

最新推荐文章于 2025-02-20 16:35:35 发布

这个需求我实现不了

最新推荐文章于 2025-02-20 16:35:35 发布

阅读量1k

点赞数 2

文章标签： uni-app

本文链接：https://blog.csdn.net/m0_60317712/article/details/131050091

版权

使用 hackout-draw-lock 插件插件地址https://ext.dcloud.net.cn/plugin?id=6230

<template>
   <view class="pass">
       <hackout-draw-lock :width='width' background="rgba(0,0,0,0)" :circle-width="64" line-color="rgb(252,64,96)"
           line-background="rgba(252,64,96,.5)" :height='height' @change="success"
           @start="startDraw"></hackout-draw-lock>
   </view>
</template>

<script>
   export default {
       data() {
           return {
               width: 256,
               height: 256,
               pass: '',
               isPass: false,
               lineError: false,
               password:'125869'
           }
       },
       methods: {
           //图形密码绘制完成
           success(data) {
               //验证图形密码
               this.pass = data.join('')
               console.log(this.pass);
               if (this.pass != this.password) {
                   uni.showToast({
                       title:'密码错误',
                       icon:'none'
                   })
                   return
               }
               uni.reLaunch({
                   url: '/pages/index/list'
               })
           },
           startDraw() {
               this.lineError = false
               this.pass = ''
           }
       },
   }
</script>
<style lang="less">
   .pass {
       margin: 20rpx auto;
       width: 256px;
   }
</style>