44 lines
1.4 KiB
Vue
44 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
// 与表单配合：FormItem 负责 label 与校验；提交后复位滑块（真实场景是校验失败 / 接口报错时）
|
|
import { reactive, ref } from 'vue'
|
|
import { G3Button, G3Form, G3FormItem, G3Input, G3Message, G3SliderCaptcha } from '@g3soft/ui'
|
|
|
|
const model = reactive({ account: '', captcha: false })
|
|
|
|
const rules = {
|
|
account: [{ required: true, message: '请输入账号' }],
|
|
captcha: [{ validator: (value: unknown) => value === true, message: '请完成滑块验证' }],
|
|
}
|
|
|
|
const captchaRef = ref<{ resume: () => void } | null>(null)
|
|
|
|
function onSubmit(values: Record<string, unknown>) {
|
|
G3Message.success(`提交：${JSON.stringify(values)}`)
|
|
// 每轮提交都要重新验证：清值 + 复位滑块
|
|
model.captcha = false
|
|
captchaRef.value?.resume()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<G3Form
|
|
:model="model"
|
|
:rules="rules"
|
|
layout="vertical"
|
|
label-align="left"
|
|
:required-mark="false"
|
|
style="max-width: 360px"
|
|
@submit="onSubmit"
|
|
>
|
|
<G3FormItem name="account" label="账号">
|
|
<G3Input v-model="model.account" placeholder="请输入账号" />
|
|
</G3FormItem>
|
|
<G3FormItem name="captcha">
|
|
<G3SliderCaptcha ref="captchaRef" v-model="model.captcha" />
|
|
</G3FormItem>
|
|
<G3FormItem>
|
|
<G3Button type="primary" block html-type="submit">提交</G3Button>
|
|
</G3FormItem>
|
|
</G3Form>
|
|
</template>
|