u

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// 与 Form 配合：FormItem 负责 label 与校验，Switch 只提供值
+import { reactive } from 'vue'
+import { G3Button, G3Form, G3FormItem, G3Message, G3Switch } from '@g3soft/ui'
+
+const model = reactive({ notify: true, public: false })
+
+function onSubmit(values: Record<string, unknown>) {
+  G3Message.success(`提交：${JSON.stringify(values)}`)
+}
+</script>
+
+<template>
+  <G3Form :model="model" :label-width="96" style="max-width: 360px" @submit="onSubmit">
+    <G3FormItem name="notify" label="接收通知">
+      <G3Switch v-model="model.notify" />
+    </G3FormItem>
+    <G3FormItem name="public" label="公开可见" help="开启后所有成员都能看到该资源">
+      <G3Switch v-model="model.public" />
+    </G3FormItem>
+    <G3FormItem>
+      <G3Button html-type="submit">保存</G3Button>
+    </G3FormItem>
+  </G3Form>
+</template>