先赞再看，养成习惯。原创不易，共同学习！

先看效果：

一、安装依赖：

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

可在 npm 官网搜索 vue-monoplasty-slide-verify 查看相关API。

二、使用插件：

在main.js中引入插件。

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

在组件中使用：

<template>
  <el-card>
    <div class="page-slidecode">
      <slide-verify
          :l="42"
          :r="10"
          :w="310"
          :h="155"
          :imgs="bgimgs"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          :slider-text="text"
        ></slide-verify>
        <div>{{msg}}</div>
    </div>
  </el-card>
</template>

<script>
import aa from "@/assets/image/aa.jpg"	//	如果使用网络图片资源就无需引入
import bb from "@/assets/image/bb.jpg"	//	如果使用网络图片资源就无需引入
import cc from "@/assets/image/cc.jpg"	//	如果使用网络图片资源就无需引入
import dd from "@/assets/image/dd.jpg"	//	如果使用网络图片资源就无需引入
import ee from "@/assets/image/ee.jpg"	//	如果使用网络图片资源就无需引入
export default {
  data() {
    return {
      msg: "",
      bgimgs:[ aa, bb, cc, dd, ee, ],
      // bgimgs:[],	//	如果使用网络图片资源就用该值
      text: "向右滑动~"
    };
  },
  methods: {
    onSuccess() {
      this.msg = "登录成功~";
    },
    onFail() {
      this.msg = "登录失败！";
    },
    onRefresh() {
      this.msg = "重新生成验证码";
    }
  }
};
</script>

各位小伙伴有什么疑问，欢迎留言探讨。