添加注释

pnpm-lock.yaml

@@ -1,4 +1,8 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
 
 dependencies:
   '@tanstack/vue-query':

src/components/CustomSelect.tsx

@@ -50,8 +50,10 @@ export default defineComponent({
       {validateOnMount: false, validateOnValueUpdate: false},
     );
 
+    // 控制options显示状态
     const showOptions = ref(false);
 
+    // 请求options
     const {isFetching, data} = useQuery({
       queryKey: [mockGetList.name],
       async queryFn () {
@@ -66,6 +68,7 @@ export default defineComponent({
       initialData: [],
     })
     
+    // 新增options
     const client = useQueryClient();
     const {isLoading, mutate} = useMutation({
       mutationFn: mockAdd,
@@ -86,13 +89,19 @@ export default defineComponent({
         }
       }
     });
-
     const message = useMessage();
     function onAdd() {
       if(!filterValue.value) return message.warning('请输入客户名称');
 
       mutate(filterValue.value);
     }
+
+    function onUpdateShow(state: boolean) {
+      if(isLoading.value) return;
+
+      showOptions.value = state;
+    }
+
     const filterValue = ref<string>('');
     const filterOptions = computed(function() {
       const options = data.value;
@@ -126,11 +135,6 @@ export default defineComponent({
 
     const {t} = useI18n();
 
-    function onUpdateShow(state: boolean) {
-      if(isLoading.value) return;
-
-      showOptions.value = state;
-    }
 
 
     return () => (