vue 实现滑动块解锁示例详解_vue.js_

引言

从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 滑动块解锁的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！