Vue.js的Neumorphism风格的Pincode输入字段 - vue-pincode

Vue.js的Neumorphism风格的Pincode输入字段 - vue-pincode
插件名称 vue-pincode
发布时间 2021年5月26日
插件作者 weslinkde

Vue.js的神经形态风格的Pincode输入字段。

特征

(图钉:1234是正确的)

  • 简单的密码输入字段
  • 同态造型
  • 流畅的动画

安装

在您的Vue.js项目中:

npm install @weslink/vue-pincode
:SPEECH_BALLOON:如果您喜欢静态文件,请从DIST文件夹中导入资产

基本例子

LOGIN.VUE
<template>
  <div id="app">
    <div class="container">
      <vue-pincode ref="pincodeInput" @pincode="login" />
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import VuePincode from "./components/VuePincode";

export default {
  name: "Login",
  components: {
    VuePincode
  },
  methods: {
    async login(pincode) {
      try {
        const { data } = await axios.post(`/login`, { pincode })
        this.$refs.pincodeInput.triggerSuccess();
        return { success: true, status: data.status }
      } catch (e) {
        this.$refs.pincodeInput.triggerMiss();
        return { success: false, status: e.response.data.status }
      }
    },
  }
};
</script>