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

引言
下载需要用到的组件库
书写登录页面

template 结构：
script 逻辑：
style 样式：
登录页面效果展示：

写滑动解锁组件

template 模板：
script 代码:
style 样式：
将滑动组件运用到我们的 Login 组件中：
补充逻辑代码

最终效果：

【vue|vue 实现滑动块解锁示例详解】
引言从0开始，写一个登录滑动解锁的功能。
首先，新创建一个 vue 项目。或者在已有的项目写也可以。将无用的代码删一下。

下载需要用到的组件库 1、下载 element-ui。

yarn addelement-ui -Sornpm 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、测试是否下载成功。

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

文章图片

写一个简单的登录页面。
Login.vue

template 结构：

script 逻辑：

style 样式：

.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; }}}

登录页面效果展示：

文章图片

写滑动解锁组件 1、下载安装包：

vue-monoplasty-slide-verify

2、导入到 main.js 中

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

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

template 模板：

script 代码:

style 样式：

.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; }

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