This commit is contained in:
严浩
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -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
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>
|
<!doctype html>
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<link
|
||||||
<title>Vite + Vue + TS</title>
|
rel="icon"
|
||||||
<link rel="stylesheet" href="/src/assets/main.css">
|
type="image/svg+xml"
|
||||||
</head>
|
href="/vite.svg"
|
||||||
<body>
|
/>
|
||||||
<div id="app"></div>
|
<meta
|
||||||
<script type="module" src="/src/main.ts"></script>
|
name="viewport"
|
||||||
</body>
|
content="width=device-width, initial-scale=1.0"
|
||||||
</html>
|
/>
|
||||||
|
<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">
|
<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>
|
||||||
@ -51,10 +85,10 @@ onMounted(() => {
|
|||||||
validation-visibility="live"
|
validation-visibility="live"
|
||||||
validation="validateGroup"
|
validation="validateGroup"
|
||||||
:validation-messages="{
|
:validation-messages="{
|
||||||
validateGroup: ({ name/* , args */ }) => {
|
validateGroup: ({ name/* , args */ }) => {
|
||||||
return `字段 ${name} 必须包含 '测试' 字符串。`
|
return `字段 ${name} 必须包含 '测试' 字符串。`
|
||||||
},
|
},
|
||||||
}"
|
}"
|
||||||
#default="{ id, messages, fns, classes }"
|
#default="{ id, messages, fns, classes }"
|
||||||
>
|
>
|
||||||
|
|
||||||
@ -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">
|
<ul
|
||||||
<p>fns.length(messages): {{ fns.length(messages) }}</p>
|
class="error-box"
|
||||||
<ul
|
:class="classes.messages"
|
||||||
:class="classes.messages"
|
v-if="fns.length(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
|
{{ message.value }}
|
||||||
v-for="message in messages"
|
</li>
|
||||||
:key="message.key"
|
</ul>
|
||||||
:class="classes.message"
|
|
||||||
:id="`${id}-${message.key}`"
|
|
||||||
:data-message-type="message.type"
|
|
||||||
>
|
|
||||||
{{ message.value }}
|
|
||||||
</li>
|
|
||||||
</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>
|
||||||
Reference in New Issue
Block a user