VUE3 使用Element Plus 点击登录按钮时弹出滑块验证 验证完后并隐藏 并带有重置滑块方法

可以通过在 `ElSlider` 组件上绑定 `visible` 属性来控制滑块验证码的显示和隐藏，同时在 `resetSlider` 方法中重置滑块的状态。具体实现步骤如下：

1. 在登录表单中添加 `ElSlider` 组件，并绑定相应的属性和事件，同时添加一个 `visible` 属性控制滑块验证码的显示和隐藏：

<template>
  <el-form>
    ...
    <el-form-item>
      <el-slider v-model="sliderValue" :disabled="!captchaVisible" :max="100" :show-input="false" @change="onSliderChange" :visible="captchaVisible"></el-slider>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :disabled="!captchaSuccess" @click="login">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      sliderValue: 0,
      captchaVisible: false,
      captchaSuccess: false
    }
  },
  methods: {
    showCaptcha() {
      // 显示滑块验证码
      this.captchaVisible = true
    },
    onSliderChange(value) {
      // 滑块滑动事件处理
      if (value >= 100) {
        this.captchaSuccess = true
        this.captchaVisible = false // 验证成功后隐藏滑块验证码
      }
    },
    resetSlider() {
      // 重置滑块状态
      this.sliderValue = 0
      this.captchaVisible = false
      this.captchaSuccess = false
    },
    login() {
      // 登录事件处理
      ...
    }
  }
}
</script>

2. 在登录按钮点击事件中调用 `showCaptcha` 方法，显示滑块验证码：

<el-button type="primary" @click="showCaptcha">登录</el-button>

3. 在重置按钮点击事件中调用 `resetSlider` 方法，重置滑块状态：

<el-button @click="resetSlider">重置</el-button>

这样就可以实现在 VUE3 中使用 Element Plus 点击登录按钮时弹出滑块验证，验证完后并隐藏，并带有重置滑块方法的功能。