vue如何封装图片滑块验证组件

这篇文章主要为大家展示了“vue如何封装图片滑块验证组件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何封装图片滑块验证组件”这篇文章吧。

具体内容如下

滑块验证组件整体不难，主要在于设置图片的样式问题，想要让背景图充满div，就需要滑块图片也跟随等比放大，效果与代码如下：

HTML：

<template>  <section class="slider-section">    <div class="img-box">      <img :src="'data:image/png;base64,' + sliderData.bigImg" class="bg-img" ref="bgImg" />      <img :src="'data:image/png;base64,' + sliderData.smallImg" class="slider-img" ref="sliderImg" />    </div>    <div class="slider-box">      <span class="slider-text">向右滑动滑块填充拼图</span>      <div class="slider-icon" @mousedown="rangeMove">></div>    </div>  </section></template>

JS：

<script>export default {  props: ['sliderData'], // 父组件传入的滑块数据对象  watch: {    sliderData: { // 监听滑块数据变化，重置滑块位置      handler (newVal, oldVal) {        if (newVal) {          this.init()        }      },      deep: true    }  },  data () {    return {      disX: 0 // 滑块距离背景图左侧的位置    }  },  mounted () {    this.init()  },  methods: {    // 初始化滑块的位置    init () {      this.disX = 0 // 初始化滑块位置      let bigImg = new Image() // 创建背景图片      bigImg.src = "data:image/png;base64," + this.sliderData.bigImg      bigImg.onload = () => {        let originWidth = bigImg.width  // 获取原始背景图片的宽度        let widthRate = this.$refs.bgImg.width / originWidth // 背景图片渲染后的实际宽度/原始图片宽度        let smallImg = new Image() // 创建滑块图片        smallImg.src = "data:image/png;base64," + this.sliderData.smallImg        this.$refs.sliderImg.src = 'data:image/png;base64,' + this.sliderData.smallImg // 设置滑块图片地址        this.$refs.sliderImg.style.width = smallImg.width * widthRate + 'px'  // 设置滑块图片宽度        this.$refs.sliderImg.style.top = this.sliderData.smallY * this.$refs.bgImg.height + 'px'  // 设置滑块距离背景图顶部的距离        this.$refs.sliderImg.style.left = 0  // 设置滑块距离背景图左侧的距离      }    },    // 移动事件触发    rangeMove (e) {      let ele = e.target      let startX = e.clientX      let eleWidth = ele.offsetWidth      let parentWidth = ele.parentElement.offsetWidth      let MaxX = parentWidth - eleWidth      document.onmousemove = (e) => {        let endX = e.clientX        this.disX = endX - startX        this.$refs.sliderImg.style.left = this.disX + 'px'        if (this.disX <= 0) {          this.disX = 0          this.$refs.sliderImg.style.left = 0        }        if (this.disX >= MaxX - eleWidth) {//减去滑块的宽度,体验效果更好          this.disX = MaxX          this.$refs.sliderImg.style.left = (parentWidth - this.$refs.sliderImg.width) + 'px'        }        ele.style.transition = '.1s all'        ele.style.transform = 'translateX(' + this.disX + 'px)'        e.preventDefault()      }      document.onmouseup = () => {        this.$emit('submitPic', this.disX / parentWidth) // 停止滑动事件冒泡给父级        setTimeout(() => {          ele.style.transition = '.5s all'; // 初始化滑块位置          ele.style.transform = 'translateX(0)';        }, 200)        document.onmousemove = null        document.onmouseup = null      }    }  }}</script>

CSS：

<style scoped lang="less">.slider-section {  margin: 20px 0;  .img-box {    position: relative;    .bg-img {      width: 100%;    }    .slider-img {      position: absolute;      left: 0;      top: 0;    }  }   .slider-box {    margin-top: 20px;    background: #f7f9fa;    color: #666;    border: 1px solid #e4e7eb;    position: relative;    height: 30px;    width: 100%;    &:hover {      box-shadow: 0 0 3px #ccc;    }    .slider-text {      font-size: 14px;      position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);    }    .slider-icon {      width: 30px;      height: 30px;      background: #c8923a;      text-align: center;      font-size: 20px;      color: #fff;      box-shadow: 0 0 6px #ccc;    }  }}</style>

注：使用的是mousedown、onmousemove 、onmouseup 事件，仅支持PC端，如果要在移动端使用，需要把这些事件改成touch等；

以上是“vue如何封装图片滑块验证组件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！