feat: PSelect 暂存

src/App.vue

@@ -1,12 +1,35 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import AllCustom from './all-custom/all-custom.vue';
 import TutorialForm from './tutorial-form/index.vue';
 import ZodForm from './zod-form/index.vue';
 
+const selectedCity = ref();
+const loading = ref(false);
+const cities = ref([
+  { name: 'New York', code: 'NY' },
+  { name: 'Rome', code: 'RM' },
+  { name: 'London', code: 'LDN' },
+  { name: 'Istanbul', code: 'IST' },
+  { name: 'Paris', code: 'PRS' }
+]);
+const loadSelectedCity = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 2000);
+};
+const handleE = (eventName: string) => {
+  return (...args: any[]) => {
+    console.log('eventName :>> ', eventName);
+    console.log('args :>> ', args);
+  };
+};
+
 </script>
 
 <template>
-  <div class="page-wrapper">
+  <div class="page-wrapper p-4">
     <ZodForm v-if="false" />
     <TutorialForm v-if="false" />
 
@@ -17,10 +40,23 @@ import ZodForm from './zod-form/index.vue';
     <!-- </div> -->
 
     <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
-      <FloatLabel>
-        <label for="username">用户名</label>
-        <InputText id="username"></InputText>
-      </FloatLabel>
+      <Select
+        v-model="selectedCity"
+        :placeholder="loading ? 'Loading' : 'Select a City'"
+        :loading="loading"
+        class="w-full md:w-56"
+        :options="cities"
+        optionLabel="name"
+        optionValue="code"
+        @input="(e: any) => handleE('input')(e)"
+        @value-change="(e) => handleE('value-change')(e)"
+      ></Select>
+      <Button
+        id="load-selected-city"
+        label="Load Selected City"
+        @click="loadSelectedCity"
+      />
+      {{ { selectedCity } }}
     </div>
   </div>
 </template>