vue 实现滑动块解锁示例详解

目录

• 引言
• 下载需要用到的组件库
• 书写登录页面
• template 结构：
• script 逻辑：
• style 样式：
• 登录页面效果展示：
• 写滑动解锁组件
• template 模板：
• script 代码:
• style 样式：
• 将滑动组件运用到我们的 Login 组件中：
• 补充逻辑代码
• 最终效果：

引言

从0开始，写一个登录滑动解锁的功能。

首先，新创建一个 vue 项目。 或者在已有的项目写也可以。 将无用的代码删一下。

下载需要用到的组件库

1、下载 element-ui。

yarn add  element-ui -S   or   npm i element-ui -S

2、 在main.js 中引入。

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
+  import ElementUI from 'element-ui'
+  import 'element-ui/lib/theme-chalk/index.css'
    Vue.config.productionTip = false
+  Vue.use(ElementUI)
    new Vue({
      router,
      store,
 +   el: '#app',
      render: h => h(App)
    }).$mount('#app')

3、测试是否下载成功。

<template>
  <div class="about">
  +   <el-button type="primary">主要按钮</el-button>
    <h1>This is an about page</h1>
  </div>
</template>

书写登录页面

页面可以正常展示按钮，说明下载成功。可以开始写代码了。

写一个简单的登录页面。

Login.vue

template 结构：

<template>
  <div class="login-container">
    <div class="login-header">
      <h1>xxx系统</h1>
    </div>
   <div class="login-body">
      <div class="login-form-container">
        <el-form
          ref="loginFormRef"
          class="form-style"
          :label-position="`right`"
          :model="loginFormData"
          status-icon
        >
          <el-form-item
            name="username"
            prop="username"
            >
            <el-input
              v-model="loginFormData.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              clearable
            />
          </el-form-item>
          <el-form-item
            class="el-item-style"
            name="password"
            prop="password"
          >
            <!-- 密码框 -->
            <el-input
              prefix-icon="el-icon-lock"
              v-model="loginFormData.password"
              :type="`${hasOpenEye? 'text':'password'}`"
              placeholder="请输入密码">
              <i
                slot="suffix"
                :class="[hasOpenEye ? 'el-icon-unlock' : 'el-icon-lock']"
                style="font-size: 14px; cursor: pointer"
                @click="hasOpenEye = !hasOpenEye"/>
            </el-input>
          </el-form-item>
          <el-form-item class="el-item-style">
            <el-button
              :loading="false"
              style="
                width: 100%;
                height: 46px;
                line-height: 15px;
                font-size: 23px;
              "
              type="primary"
              @click="login"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

script 逻辑：

<script>
export default {
  // 登录表单数据
  data () {
  return {
    loginFormData: {
      username: "123232",
      password: "21232"
    },
    hasOpenEye : false, // 是否显示密码
  }
  },
  components: {},
  methods: {
    login () {},
  },
}
</script>

style 样式：

<style lang="less" scoped>
.login-container {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  user-select: none;
  flex-direction: column;
  .login-header {
    display: flex;
    align-items: center;
    padding-left: 50px;
    cursor: pointer;
  }
  .login-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #322b34;
    font-size: 12px;
  }
  .login-header,
  .login-footer {
    height: 10%;
  }
  .login-body {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    .login-form-container {
      width: 30%;
      border: 1px solid mix(pink, #000, 80);
      box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3),
        rgba(0, 0, 0, 0.3)
      );
      padding: 20px 30px;
      border-radius: 5px;
    }
  }
}
</style>

登录页面效果展示：

写滑动解锁组件

1、下载安装包：

vue-monoplasty-slide-verify

2、导入到 main.js 中

import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

3、新建一个文件component / verify.vue

template 模板：

<template>
  <div>
    <!-- title="滑块验证码" -->
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="dialogBeforeClose"
      :close-on-click-modal="false"
    >
      <div class="flex">
        <slide-verify
          ref="slideblock"
          :w="fullWidth"
          :h="fullHeight"
          :accuracy="accuracy"
          :slider-text="text"
          :imgs="imgList"
          @again="onAgain"
          @fulfilled="onFulfilled"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
        />
      </div>
    </el-dialog>
  </div>
</template>

script 代码:

<script>
export default {
  name: 'verify',
  data() {
    return {
      dialogVisible: false,
      fullWidth: 450,
      fullHeight: 304,
      msg: '',
      text: '请向右滑动滑块完成验证',
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 3,
      imgList: [
      // 图片的路径：
        require('../assets/3.jpg')
      ]
    }
  },
  mounted() {},
  methods: {
    dialogBeforeClose() {
      this.dialogVisible = false
    },
    onSuccess() {
      console.log('验证通过')
      this.msg = 'login success'
      this.dialogVisible = false
      this.$emit('verifySuccess')
       this.$message.success("验证成功")
       this.$router.push('/a')
    },
    onFail() {
      console.log('验证不通过')
      this.msg = '验证不通过'
        this.$message.error('验证失败')
    },
    onRefresh() {
      console.log('点击了刷新小图标')
      this.msg = ''
    },
    onFulfilled() {
      console.log('刷新成功啦！')
    },
    onAgain() {
      console.log('检测到非人为操作的哦！')
      this.msg = 'try again'
      // 刷新
      this.$refs.slideblock.reset()
    },
    handleClick() {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset()
      console.log(23333);
    }
  }
}
</script>

style 样式：

<style lang="less" scoped>
.flex{
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .el-dialog {
  width: 500px;
  border-radius: 16px;
  margin: auto;
}
/deep/ .el-dialog__header {
  display: none;
}
/deep/ .slide-verify-slider {
  border-radius: 33px;
}
/deep/ .slide-verify-slider-mask {
  border-radius: 33px 0 0 33px;
}
</style>

将滑动组件运用到我们的 Login 组件中：

import verify from "../components/verify.vue";
export default {
 components: {
    verify
  },
}

<template>
   <el-form>
   ......
   </el-form>
+ <verify ref="verify"></verify>
</template>

补充逻辑代码

login () {
      this.$refs.verify.dialogVisible = true
  },

最终效果：

完成。

以上就是vue 实现滑动块解锁示例详解的详细内容，更多关于vue 滑动块解锁的资料请关注我们其它相关文章！