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

书写登录页面

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

写一个简单的登录页面。

Login.vue

template 结构：

script 逻辑：

style 样式：

登录页面效果展示：

写滑动解锁组件

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 样式：

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

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

补充逻辑代码

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

最终效果：

完成。

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