u

code/g3soft-libs/docs/examples/captcha/in-form.vue

@@ -0,0 +1,43 @@
+<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>