feat: PrimeVue 表单

src/all-custom-primevue/all-custom-primevue.vue

@@ -0,0 +1,76 @@
+<template>
+
+  <form @submit.prevent="onFormSubmit">
+    <Fieldset
+      legend="Form 1"
+      pt:content:class="flex flex-col gap-4 w-full sm:w-56"
+    >
+
+      <div class="flex flex-col gap-1">
+        <label for="username">Username</label>
+        <InputText
+          id="username"
+          type="text"
+          placeholder="Username"
+          fluid
+          :invalid="true"
+        />
+        <Message
+          icon="pi pi-key"
+          severity="warn"
+          size="small"
+          variant="simple"
+        >消息 warn</Message>
+      </div>
+
+      <FormField
+        name="FormField"
+        initialValue="1"
+        class="flex flex-col gap-1"
+      >
+        <label
+          for="password"
+          class="font-bold block mb-2"
+        >Password</label>
+        <Password
+          name="password"
+          placeholder="Password"
+          :feedback="false"
+          toggleMask
+          fluid
+        />
+        <Message
+          severity="error"
+          size="small"
+          variant="simple"
+        >
+          <ul class="my-0 px-4 flex flex-col gap-1">
+            <li
+              v-for="(error, index) in [
+                { message: '错误1' },
+                { message: '错误2' }
+              ]"
+              :key="index"
+            >{{ error.message }}</li>
+          </ul>
+        </Message>
+
+      </FormField>
+
+      <Button
+        type="submit"
+        severity="secondary"
+        label="Submit"
+      />
+    </Fieldset>
+  </form>
+</template>
+
+<script setup lang="ts">
+import Message from 'primevue/message';
+
+function onFormSubmit(...args: any[]) {
+  console.debug(`args :>> `, args);
+  console.log('Form submitted');
+}
+</script>