vue图片验证码怎么写

npm install vue-captcha

// Captcha.vue<template><div>    @@##@@    <input v-model="input" placeholder="请输入验证码"><button>提交</button>  </div></template><script>import VueCaptcha from 'vue-captcha';export default {  components: { VueCaptcha },  data() {    return {      captchaUrl: null,      input: '',    };  },  methods: {    refreshCaptcha() {      this.captchaUrl = `/api/captcha?t=${new Date().getTime()}`;    },    submit() {      // 发送验证码到服务器进行验证      // ...    },  },  mounted() {    this.refreshCaptcha();  },};</script>

// captcha.php<?php // 生成随机验证码$captcha = rand(1000, 9999);// 创建验证码图片$image = imagecreate(100, 40);$textColor = imagecolorallocate($image, 0, 0, 0);imagestring($image, 5, 20, 10, $captcha, $textColor);// 输出验证码图片header('Content-type: image/png');imagepng($image);imagedestroy($image);?>

// submit.jsaxios.post('/api/captcha/verify', { captcha: this.input }).then((res) => {  if (res.data.success) {    // 验证码验证成功    // ...  } else {    // 验证码验证失败    // ...  }});

// Captcha.vue<template><!-- ... --><button>刷新验证码</button>  <!-- ... --></template>