当前位置：首页 > news >正文

腾讯 DeepSeek-R1 × Vue3 使用体验报告

news 来源：原创 2025/5/23 22:46:08

使用vue3+tsx实现一个注册登录

// AuthForm.tsx
import { defineComponent, reactive, ref } from 'vue'

interface FormData {
  email: string
  password: string
  confirmPassword?: string
}

export default defineComponent({
  setup() {
    const isLoginMode = ref(true)
    const isLoading = ref(false)
    const errorMessage = ref('')

    const formData = reactive<FormData>({
      email: '',
      password: '',
      confirmPassword: ''
    })

    const errors = reactive({
      email: '',
      password: '',
      confirmPassword: ''
    })

    const validateEmail = (email: string) => {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!email) return 'Email is required'
      if (!regex.test(email)) return 'Invalid email format'
      return ''
    }

    const validatePassword = (password: string) => {
      if (!password) return 'Password is required'
      if (password.length < 6) return 'Password must be at least 6 characters'
      return ''
    }

    const validateForm = () => {
      let isValid = true
      
      errors.email = validateEmail(formData.email)
      errors.password = validatePassword(formData.password)

      if (!isLoginMode.value) {
        errors.confirmPassword = formData.password === formData.confirmPassword 
          ? '' 
          : 'Passwords do not match'
      }

      if (Object.values(errors).some(msg => msg)) isValid = false
      return isValid
    }

    const handleSubmit = async (e: Event) => {
      e.preventDefault()
      if (!validateForm()) return

      isLoading.value = true
      errorMessage.value = ''

      try {
        // 模拟 API 调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        if (isLoginMode.value) {
          console.log('Login data:', formData)
          // 实际调用登录 API
        } else {
          console.log('Register data:', formData)
          // 实际调用注册 API
        }
      } catch (err) {
        errorMessage.value = 'An error occurred. Please try again.'
      } finally {
        isLoading.value = false
      }
    }

    const switchMode = () => {
      isLoginMode.value = !isLoginMode.value
      // 重置表单
      Object.assign(formData, {
        email: '',
        password: '',
        confirmPassword: ''
      })
      Object.assign(errors, {
        email: '',
        password: '',
        confirmPassword: ''
      })
    }

    return () => (
      <div class="auth-container">
        <h2>{isLoginMode.value ? 'Login' : 'Register'}</h2>
        
        {errorMessage.value && (
          <div class="error-message">{errorMessage.value}</div>
        )}

        <form onSubmit={handleSubmit}>
          <div class="form-group">
            <label>Email</label>
            <input
              type="email"
              v-model={formData.email}
              disabled={isLoading.value}
            />
            {errors.email && <div class="error">{errors.email}</div>}
          </div>

          <div class="form-group">
            <label>Password</label>
            <input
              type="password"
              v-model={formData.password}
              disabled={isLoading.value}
            />
            {errors.password && <div class="error">{errors.password}</div>}
          </div>

          {!isLoginMode.value && (
            <div class="form-group">
              <label>Confirm Password</label>
              <input
                type="password"
                v-model={formData.confirmPassword}
                disabled={isLoading.value}
              />
              {errors.confirmPassword && (
                <div class="error">{errors.confirmPassword}</div>
              )}
            </div>
          )}

          <button
            type="submit"
            disabled={isLoading.value}
            class="submit-btn"
          >
            {isLoading.value ? 'Processing...' : isLoginMode.value ? 'Login' : 'Register'}
          </button>
        </form>

        <div class="switch-mode">
          {isLoginMode.value ? 'Need an account? ' : 'Already have an account? '}
          <button type="button" onClick={switchMode} class="switch-btn">
            {isLoginMode.value ? 'Register' : 'Login'}
          </button>
        </div>
      </div>
    )
  }
})

使用截图

请在此添加图片描述