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

FormKitSchemaDefinition；
All checks were successful
/ surge (push) Successful in 38s
Details

Browse Source
This commit is contained in:
严浩
2024-11-15 15:25:11 +08:00
parent 90583317e3
commit f9677d87b9
4 changed files with 99 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.vscode/settings.json vendored
View File

@ -3,9 +3,9 @@
"source.fixAll": "explicit" "source.fixAll": "explicit"
}, },
"[vue]": { "[vue]": {
"editor.defaultFormatter": "Vue.volar" "editor.defaultFormatter": "Vue.volar",
}, },
"editor.formatOnSave": true, "editor.formatOnSave": true,
"editor.formatOnSaveMode": "modifications", "editor.formatOnSaveMode": "file",
"typescript.tsdk": "node_modules/typescript/lib", // 只格式化修改的部分 "typescript.tsdk": "node_modules/typescript/lib",
} }

11
README.md
View File

@ -1,5 +1,10 @@
# Vue 3 + TypeScript + Vite # Vue FormKit Example
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. - https://formkit.com/essentials/inputs#sections
- https://themes.formkit.com/editor?theme=regenesis
- https://formkit.com/essentials/architecture#getting-a-components-node
- https://formkit.com/essentials/architecture#getting-a-components-node#message-store
- https://formkit.com/essentials/validation#showing-errors
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). ---
- https://github.com/formkit/formkit/blob/master/packages/addons/src/plugins/autoHeightTextarea.ts

26
index.html
View File

@ -1,14 +1,30 @@
<!doctype html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> rel="icon"
<title>Vite + Vue + TS</title> type="image/svg+xml"
<link rel="stylesheet" href="/src/assets/main.css"> href="/vite.svg"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Vue FormKit Example</title>
<link
rel="stylesheet"
href="/src/assets/main.css"
>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script
type="module"
src="/src/main.ts"
></script>
</body> </body>
</html> </html>

53
src/App.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { getNode, type FormKitNode } from '@formkit/core'; import { FormKitSchemaDefinition, getNode, type FormKitNode } from '@formkit/core';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
async function submit(...args: any[]) { async function submit(...args: any[]) {
@ -12,6 +13,7 @@ const castNumber = (node: FormKitNode) => {
node.hook.input((value, next) => next(Number(value))) node.hook.input((value, next) => next(Number(value)))
} }
onMounted(() => { onMounted(() => {
const agreeNode = getNode('agreeNodeId') const agreeNode = getNode('agreeNodeId')
Object.assign(window, { agreeNode }) Object.assign(window, { agreeNode })
@ -25,6 +27,38 @@ onMounted(() => {
nameNode!.input(`${newValue} ${payload ? '👍' : '👎'}`) nameNode!.input(`${newValue} ${payload ? '👍' : '👎'}`)
}) })
}) })
const addressSchema: FormKitSchemaDefinition = [
{
$formkit: 'group',
name: 'address',
children: [
{
$formkit: 'text',
name: 'street',
label: '街道地址',
validation: 'required',
validationLabel: '街道地址'
},
{
$formkit: 'text',
name: 'city',
label: '城市',
validation: 'required',
validationLabel: '城市'
},
{
$formkit: 'text',
name: 'zipCode',
label: '邮政编码',
validation: 'required|number|length:6',
validationLabel: '邮政编码',
errors: ['显式错误'] // 显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。
// :errors="errors"
}
]
}
];
</script> </script>
<template> <template>
@ -86,40 +120,41 @@ onMounted(() => {
type="range" type="range"
name="strength" name="strength"
id="strength" id="strength"
label="Strength" label="力量"
value="5" value="5"
validation="min:2|max:9" validation="min:2|max:9"
validation-visibility="live" validation-visibility="live"
min="1" min="1"
max="10" max="10"
step="1" step="1"
help="How many strength points should this character have?" help="这个角色应该有多少力量点？"
:plugins="[castNumber]" :plugins="[castNumber]"
class="mb-4" class="mb-4"
/> />
<!-- By default groups do not show validation messages, so we need to add it manually --> <!-- By default groups do not show validation messages, so we need to add it manually -->
<div class="error-box">
<p>fns.length(messages): {{ fns.length(messages) }}</p>
<ul <ul
class="error-box"
:class="classes.messages" :class="classes.messages"
v-if="fns.length(messages)" v-if="fns.length(messages)"
> >
<li <li
v-for="message in messages" v-for="message in messages"
:key="message.key" :key="message.key"
:class="classes.message"
:id="`${id}-${message.key}`" :id="`${id}-${message.key}`"
:data-message-type="message.type" :data-message-type="message.type"
> >
{{ message.value }} {{ message.value }}
</li> </li>
</ul> </ul>
</div>
</FormKit> </FormKit>
</div> </div>
<div class="character-attributes">
<FormKitSchema :schema="addressSchema" />
</div>
<FormKit <FormKit
type="checkbox" type="checkbox"
name="agree" name="agree"
@ -142,7 +177,7 @@ onMounted(() => {
background-color: #f9fafb; background-color: #f9fafb;
} }
.error-box { ul.error-box {
padding: 0.75rem; padding: 0.75rem;
border: 1px solid #ef4444; border: 1px solid #ef4444;
border-radius: 0.375rem; border-radius: 0.375rem;
@ -152,7 +187,7 @@ onMounted(() => {
line-height: 1.25rem; line-height: 1.25rem;
} }
.error-box p { ul.error-box p {
font-weight: 500; font-weight: 500;
} }
</style> </style>