添加 setFocus 示例

src/modules/demo/views/crud/components/form/setFocus.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<el-tag size="small" effect="dark" disable-transitions>setFocus</el-tag>
+			<span>自动聚焦</span>
+		</div>
+
+		<div class="c">
+			<el-button @click="open">预览</el-button>
+			<demo-code :files="['form/setFocus.vue']" />
+
+			<!-- 自定义表单组件 -->
+			<cl-form ref="Form"></cl-form>
+		</div>
+
+		<div class="f">
+			<span class="date">2025-03-12</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="tsx">
+import { useForm } from '@cool-vue/crud';
+import { Plugins } from '/#/crud';
+
+const Form = useForm();
+
+function open() {
+	Form.value?.open(
+		{
+			title: '自动聚焦',
+
+			items: [
+				{
+					label: '昵称',
+					prop: 'nickname',
+					component: {
+						name: 'el-input',
+
+						props: {
+							placeholder: '请输入昵称',
+							clearable: true
+						}
+					}
+				},
+				{
+					prop: 'age',
+					component: {
+						name: 'el-input-number'
+					},
+					// 默认值，第一次打开有效
+					value: 18
+				}
+			]
+		},
+		[
+			// 【很重要】全局已添加该插件
+			// Plugins.Form.setFocus('age'), // 指定自动聚焦的字段
+			Plugins.Form.setFocus('') // 禁用自动聚焦
+		]
+	);
+}
+</script>

src/modules/demo/views/crud/index.vue

@@ -3,6 +3,15 @@
 		<div class="crud-demo">
 			<el-tabs v-model="active" type="card" @tab-change="onTabChange">
 				<el-tab-pane v-for="(a, ai) in list" :key="ai" :label="a.title" :name="a.title">
+					<el-alert
+						type="warning"
+						:closable="false"
+						class="mb-[10px]"
+						v-if="['cl-upsert', 'cl-search', 'cl-adv-search'].includes(a.title)"
+					>
+						基于 cl-form 组件封装，以下是扩展的一些用法
+					</el-alert>
+
 					<div v-for="(b, bi) in a.children" :key="bi" class="group">
 						<p class="label"># {{ b.label }}</p>
 
@@ -55,6 +64,7 @@ import FormCrud from './components/form/crud.vue';
 import FormRules from './components/form/rules.vue';
 import FormComponent from './components/form/component/index.vue';
 import FormPlugin from './components/form/plugin/index.vue';
+import FormSetFocus from './components/form/setFocus.vue';
 
 import TableBase from './components/table/base.vue';
 import TableFormatter from './components/table/formatter.vue';
@@ -139,19 +149,6 @@ const list = [
 			}
 		]
 	},
-	{
-		title: 'cl-upsert',
-		children: [
-			{
-				label: '基础',
-				children: [UpsertBase, UpsertEvent, UpsertMode]
-			},
-			{
-				label: '高级',
-				children: [UpsertHook]
-			}
-		]
-	},
 	{
 		title: 'cl-form',
 		children: [
@@ -177,7 +174,20 @@ const list = [
 			},
 			{
 				label: '插件',
-				children: [FormPlugin]
+				children: [FormPlugin, FormSetFocus]
+			}
+		]
+	},
+	{
+		title: 'cl-upsert',
+		children: [
+			{
+				label: '基础',
+				children: [UpsertBase, UpsertEvent, UpsertMode]
+			},
+			{
+				label: '高级',
+				children: [UpsertHook]
 			}
 		]
 	},

src/plugins/crud/plugins/form/setFocus.ts

@@ -2,13 +2,17 @@ import { useRefs } from '/@/cool';
 
 /**
  * 设置聚焦，prop为空则默认第一个选项
- * @param prop
+ * @param prop 字段标识
  * @returns
  */
 export function setFocus(prop?: string): ClForm.Plugin {
 	const { refs, setRefs } = useRefs();
 
 	return ({ exposed, onOpen }) => {
+		if (prop === '') {
+			return;
+		}
+
 		const name = prop || exposed.config?.items?.[0]?.prop;
 		let _ref: any;