vue2滑动滑动条旋转图片验证,数字字母验证码

Vue SFC Playground   查看vue单页面效果

<template>
  <div class="container">
    <div class="image-wrapper">
      <div class="image-box" :style="{
        transform: `rotate(${rotateDegrees}deg)`,
        background: `url(${imageSrc}) no-repeat center / 100% auto`,
    }"></div>
      <input type="range" min="0" max="360" v-model="rotationValue" @mouseup="checkRotation" @touchend="checkRotation">
    </div>
    <div class="message" v-if="showMessage">{{ message }}</div>
    <div class="degree-info">当前图片度数: {{ rotateDegrees }}</div>
    <div class="degree-info">初始化图片度数: {{ firstRotateDegrees }}</div>
    <div class="degree-info">当前滚动条度数: {{ rotationValue }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rotateDegrees: 0, // 随机旋转角度
      firstRotateDegrees: Math.floor(Math.random() * 360), // 随机旋转角度
      rotationValue:0,
      showMessage: false,
      message: '',
      imageSrc: 'https://img2.baidu.com/it/u=3344911223,3409692090&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
    };
  },
  methods: {
    checkRotation() {
      if( Math.abs(360 - (this.rotateDegrees)) <= 10) {
        this.message = '验证成功'
      } else {
        this.message = '验证失败'
      }
        console.log('777')
        this.showMessage = true;
        this.rotationValue = 0;
        setTimeout(() => {
          this.firstRotateDegrees = Math.floor(Math.random() * 360);
          this.rotateDegrees = this.firstRotateDegrees;
          this.showMessage = false;
        }, 2000);

    },
    slideEvent(){
    },
  },
 created() {
    this.rotateDegrees = this.firstRotateDegrees
  },
  watch: {
    rotationValue(newVal,oldVal) {
     if (!this.showMessage){
          this.rotateDegrees = this.rotateDegrees + (newVal-oldVal);
          console.log('666')
     }

    },
  }
};
</script>


<style scoped>
.container {
  width: 200px;
  height: 300px;
  text-align: center;
}

.image-wrapper {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.image-box {
 position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 180px;
  height: 180px;
  
}

.rotation-control {
  width: 90%;
  margin-top: 20px;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message {
  margin-top: 20px;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
}
</style>

<template>
  <div>
    <div class="captcha" @click="refreshCaptcha">
      {{ captcha }}
    </div>
    <input type="text" v-model="input" placeholder="请输入验证码">
    <button @click="checkCaptcha">验证</button>
    <div v-if="isValid" class="success-message">
      验证成功！
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      captcha: '',
      input: '',
      isValid: false
    };
  },
  mounted() {
    this.refreshCaptcha();
  },
  methods: {
    refreshCaptcha() {
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let result = '';
      for (let i = 0; i < 6; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      this.captcha = result;
    },
  //四位数字
    // const refreshCaptcha = ()=> {
    //   captcha.value = Math.floor(1000 + Math.random() * 9000).toString();;
    // }
    checkCaptcha() {
      if (this.input === this.captcha) {
        this.isValid = true;
      } else {
        this.isValid = false;
      }
    }
  }
};
</script>
 
<style>
.captcha {
  cursor: pointer;
  font-size: 24px;
  width: fit-content;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 16px;
}
 
.success-message {
  color: green;
  margin-top: 8px;
}
</style>