VUE3 使用Element Plus 点击登录按钮弹出滑块验证

可以通过 Element Plus 提供的 `ElSlider` 组件来实现滑块验证功能。具体实现步骤如下：

1. 在登录页面引入 Element Plus 组件库，并注册 `ElSlider` 组件：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(...)
app.use(ElementPlus)

2. 在登录表单中添加 `ElSlider` 组件，并绑定相应的属性和事件：

<template>
  <el-form>
    ...
    <el-form-item>
      <el-slider v-model="sliderValue" :disabled="!captchaVisible" :max="100" :show-input="false" @change="onSliderChange"></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
      }
    },
    login() {
      // 登录事件处理
      ...
    }
  }
}
</script>

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

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

这样就可以实现在 VUE3 中使用 Element Plus 点击登录按钮弹出滑块验证的功能。