实现滑动拼图验证登录vue

1、效果图

2、 引入滑动拼图验证组件

• 安装组件

npm install --save vue-monoplasty-slide-verify

•  配置组件

lib/slide-verify.vue

 lib/index.js

import SlideVerify from './slide-verify.vue'

const plugins = {
  install(Vue) {
      Vue.component(SlideVerify.name, SlideVerify)
  }
}

if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(SlideVerify)
}

export default plugins

• 在main.js文件中导入组件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入滑块组件
import SlideVerify from './lib/index'



createApp(App).use(SlideVerify).mount('#app')

•  App.vue