examples/vue-formkit-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移除 AllCustomPrimevue 组件，简化 App.vue 结构
All checks were successful
/ test (push) Successful in 27s
Details
/ surge (push) Successful in 47s
Details

Browse Source
This commit is contained in:
严浩
2024-11-26 09:43:48 +08:00
parent de0014590e
commit 223b460af8
2 changed files with 7 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.vue
View File

@ -1,20 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import TutorialForm from './tutorial-form/index.vue' import AllCustom from './all-custom/all-custom.vue';
import ZodForm from './zod-form/index.vue' import TutorialForm from './tutorial-form/index.vue';
import AllCustom from './all-custom/all-custom.vue' import ZodForm from './zod-form/index.vue';
import AllCustomPrimevue from './all-custom-primevue/all-custom-primevue.vue'
</script> </script>
<template> <template>
<ZodForm v-if="false" /> <ZodForm v-if="false" />
<TutorialForm v-if="false" /> <TutorialForm v-if="false" />
<div class="flex flex-col md:flex-row items-start p-4 gap-4"> <!-- <div class="flex flex-col md:flex-row items-start p-4 gap-4"> -->
<div class="md:w-1/2 p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white"> <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
<AllCustom /> <AllCustom />
</div> </div>
<div class="md:w-1/2 p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white"> <!-- </div> -->
<AllCustomPrimevue />
</div>
</div>
</template> </template>

83
src/all-custom-primevue/all-custom-primevue.vue
View File

@ -1,83 +0,0 @@
<template>
<Fieldset
legend="Form 1"
pt:content:class="flex justify-center"
>
<form
class="flex flex-col gap-4 w-full"
@submit.prevent="onFormSubmit"
>
<div class="flex flex-col gap-2">
<label for="username">Username</label>
<InputText
id="username"
type="username"
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-2"
>
<label
for="password"
class="font-bold block mb-2"
>Password</label>
<Password
name="password"
placeholder="Password"
toggleMask
fluid
promptLabel="输入密码"
weakLabel="太简单"
mediumLabel="复杂度一般"
strongLabel="复杂密码"
/>
<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"
/>
</form>
</Fieldset>
</template>
<script setup lang="ts">
import Message from 'primevue/message';
function onFormSubmit(...args: any[]) {
console.debug(`args :>> `, args);
console.log('Form submitted');
}
</script>