vue封裝圖片滑塊驗證組件的方法

更新時間：2022年03月31日 11:49:47 作者：guanguan0_0

這篇文章主要為大家詳細介紹了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: { // 監(jiān)聽滑塊數據變化，重置滑塊位置
? ? ? 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() // 創(chuàng)建背景圖片
? ? ? 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() // 創(chuàng)建滑塊圖片
? ? ? ? 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 ?// 設置滑塊距離背景圖左側的距離
? ? ? }
? ? },
? ? // 移動事件觸發(fā)
? ? 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等；

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: