This commit is contained in:
严浩
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -3,9 +3,9 @@
|
||||
"source.fixAll": "explicit"
|
||||
},
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "Vue.volar"
|
||||
"editor.defaultFormatter": "Vue.volar",
|
||||
},
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnSaveMode": "modifications",
|
||||
"typescript.tsdk": "node_modules/typescript/lib", // 只格式化修改的部分
|
||||
"editor.formatOnSaveMode": "file",
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
}
|
||||
11
README.md
11
README.md
@ -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
|
||||
40
index.html
40
index.html
@ -1,14 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
<link rel="stylesheet" href="/src/assets/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/svg+xml"
|
||||
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>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script
|
||||
type="module"
|
||||
src="/src/main.ts"
|
||||
></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
85
src/App.vue
85
src/App.vue
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { getNode, type FormKitNode } from '@formkit/core';
|
||||
import { FormKitSchemaDefinition, getNode, type FormKitNode } from '@formkit/core';
|
||||
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
async function submit(...args: any[]) {
|
||||
@ -12,6 +13,7 @@ const castNumber = (node: FormKitNode) => {
|
||||
node.hook.input((value, next) => next(Number(value)))
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const agreeNode = getNode('agreeNodeId')
|
||||
Object.assign(window, { agreeNode })
|
||||
@ -25,6 +27,38 @@ onMounted(() => {
|
||||
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>
|
||||
|
||||
<template>
|
||||
@ -51,10 +85,10 @@ onMounted(() => {
|
||||
validation-visibility="live"
|
||||
validation="validateGroup"
|
||||
:validation-messages="{
|
||||
validateGroup: ({ name/* , args */ }) => {
|
||||
return `字段 ${name} 必须包含 '测试' 字符串。`
|
||||
},
|
||||
}"
|
||||
validateGroup: ({ name/* , args */ }) => {
|
||||
return `字段 ${name} 必须包含 '测试' 字符串。`
|
||||
},
|
||||
}"
|
||||
#default="{ id, messages, fns, classes }"
|
||||
>
|
||||
|
||||
@ -86,40 +120,41 @@ onMounted(() => {
|
||||
type="range"
|
||||
name="strength"
|
||||
id="strength"
|
||||
label="Strength"
|
||||
label="力量"
|
||||
value="5"
|
||||
validation="min:2|max:9"
|
||||
validation-visibility="live"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
help="How many strength points should this character have?"
|
||||
help="这个角色应该有多少力量点？"
|
||||
:plugins="[castNumber]"
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
|
||||
<!-- 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
|
||||
:class="classes.messages"
|
||||
v-if="fns.length(messages)"
|
||||
<ul
|
||||
class="error-box"
|
||||
:class="classes.messages"
|
||||
v-if="fns.length(messages)"
|
||||
>
|
||||
<li
|
||||
v-for="message in messages"
|
||||
:key="message.key"
|
||||
:id="`${id}-${message.key}`"
|
||||
:data-message-type="message.type"
|
||||
>
|
||||
<li
|
||||
v-for="message in messages"
|
||||
:key="message.key"
|
||||
:class="classes.message"
|
||||
:id="`${id}-${message.key}`"
|
||||
:data-message-type="message.type"
|
||||
>
|
||||
{{ message.value }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ message.value }}
|
||||
</li>
|
||||
</ul>
|
||||
</FormKit>
|
||||
</div>
|
||||
|
||||
<div class="character-attributes">
|
||||
<FormKitSchema :schema="addressSchema" />
|
||||
</div>
|
||||
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
name="agree"
|
||||
@ -142,7 +177,7 @@ onMounted(() => {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
ul.error-box {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ef4444;
|
||||
border-radius: 0.375rem;
|
||||
@ -152,7 +187,7 @@ onMounted(() => {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.error-box p {
|
||||
ul.error-box p {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user