|
46 | 46 | </div> |
47 | 47 | <div class="mt-2" v-if="showAddCategory"> |
48 | 48 | <div class="flex gap-2"> |
49 | | - <input type="text" v-model="newCategory" class="input input-bordered flex-grow" placeholder="新分类名称" /> |
| 49 | + <input |
| 50 | + type="text" |
| 51 | + v-model="newCategory" |
| 52 | + ref="categoryInput" |
| 53 | + class="input input-bordered flex-grow" |
| 54 | + placeholder="新分类名称" |
| 55 | + @keyup.enter="addNewCategory" |
| 56 | + /> |
50 | 57 | <button class="btn btn-primary" @click="addNewCategory"> |
51 | 58 | <i class="icon-[tabler--check]"></i> |
52 | 59 | </button> |
|
73 | 80 | </div> |
74 | 81 | <div class="mt-2" v-if="showAddSubCategory"> |
75 | 82 | <div class="flex gap-2"> |
76 | | - <input type="text" v-model="newSubCategory" class="input input-bordered flex-grow" placeholder="新二级分类名称" /> |
| 83 | + <input |
| 84 | + type="text" |
| 85 | + v-model="newSubCategory" |
| 86 | + ref="subCategoryInput" |
| 87 | + class="input input-bordered flex-grow" |
| 88 | + placeholder="新二级分类名称" |
| 89 | + @keyup.enter="addNewSubCategory" |
| 90 | + /> |
77 | 91 | <button class="btn btn-primary" @click="addNewSubCategory"> |
78 | 92 | <i class="icon-[tabler--check]"></i> |
79 | 93 | </button> |
@@ -162,6 +176,30 @@ export default defineComponent({ |
162 | 176 | const isSaving = ref(false); |
163 | 177 | const errorMessage = ref(''); |
164 | 178 | |
| 179 | + // 输入框引用 |
| 180 | + const categoryInput = ref<HTMLInputElement | null>(null); |
| 181 | + const subCategoryInput = ref<HTMLInputElement | null>(null); |
| 182 | + |
| 183 | + // 监听分类添加状态,自动聚焦 |
| 184 | + watch(showAddCategory, (newVal) => { |
| 185 | + if (newVal) { |
| 186 | + // 等待DOM更新后聚焦 |
| 187 | + setTimeout(() => { |
| 188 | + categoryInput.value?.focus(); |
| 189 | + }, 50); |
| 190 | + } |
| 191 | + }); |
| 192 | + |
| 193 | + // 监听二级分类添加状态,自动聚焦 |
| 194 | + watch(showAddSubCategory, (newVal) => { |
| 195 | + if (newVal) { |
| 196 | + // 等待DOM更新后聚焦 |
| 197 | + setTimeout(() => { |
| 198 | + subCategoryInput.value?.focus(); |
| 199 | + }, 50); |
| 200 | + } |
| 201 | + }); |
| 202 | + |
165 | 203 | // 本地分类管理 |
166 | 204 | const localCategories = ref<string[]>([]); |
167 | 205 | const localSubCategories = ref<{[key: string]: string[]}>({}); |
@@ -407,6 +445,8 @@ export default defineComponent({ |
407 | 445 | errorMessage, |
408 | 446 | localCategories, |
409 | 447 | localSubCategories, |
| 448 | + categoryInput, |
| 449 | + subCategoryInput, |
410 | 450 | |
411 | 451 | // 方法 |
412 | 452 | addNewCategory, |
|
0 commit comments