@ fieldia/ veue (英语)
外地 vue 3 中的窗体 : 一个薄的外壳
@fieldia/viewer,所以一个页面看起来和行为都与任何其他框架相同.
npm install @fieldia/vue
<script setup lang="ts">
import { FieldiaForm } from '@fieldia/vue';
import { createMemoryDataSource } from '@fieldia/core';
import page from './customer.page.json';
const dataSource = createMemoryDataSource();
</script>
<template>
<FieldiaForm :page="page" :data-source="dataSource" :record-id="1" skin="underline" />
</template>
单位 坚果 (或任何服务器上的 Vue),给出组件 first-paint:
使表单在服务器上的第一个涂料——其值用平方 HTML, in
Fieldia的外观——浏览器在任何脚本和水合物之前显示的外观
即是;观者在它被抽取而装满之后,就把它挂在上面
同时键入( e)@fieldia/viewer/server:
<script setup lang="ts">
const { data: record } = await useFetch(`/api/enquiries/${useRoute().params.id}`);
const nonce = useNuxtApp().ssrContext?.event.context.nonce; // with a strict Content-Security-Policy
</script>
<template>
<FieldiaForm :page="page" :data-source="dataSource" :record-id="record.id" :nonce="nonce" :first-paint="{ values: record }" />
</template>
自定义字段可以是 Vue 组件(fieldTypes),槽内容输入命名
插槽,以及 useFormState(form) 给你一个表格状态 作为裁判。 列表页面
通过 @open-record 活动.
表格上的事件是.. change, (中文(简体) ), save, (中文(简体) ), send, (中文(简体) ), step, (中文(简体) ), run - 和
@action处理器可能响应按钮或按钮 call 步骤( 是 onAction
道具,它返回的是什么:
<FieldiaForm
:page="page"
:data-source="dataSource"
:pages="pages"
@action="({ action, values }) => (action === 'check_stock' ? { values: { price: priceOf(values.product) } } : undefined)"
@change="({ field, value, by }) => {}"
@save="({ recordId, values }) => {}"
@send="({ values }) => {}"
@step="({ step }) => {}"
@run="({ id, result }) => {}"
/>
host 财务报告和审定财务报表 on-open 是查看者自己的选项(参见 @fieldia/viewer; 计 数
控件来源 @ready 已经 on, (中文(简体) ), setValues 财务报告和审定财务报表 run。 。 。 .
一个页面带有 continueLater 打开您服务器上保存的草稿
:resume="route.query.resume",然后继续提供链接键
@draft="({ key, later, saved }) => …" 已被告知每份草稿。 一个新的
resume 打开这个草案,作为一个新的 record-id 打开记录.
从链接中填充字段的页面( E)prefill阅读浏览器的地址;
在服务器上或在其他页面中显示的应用程序会给出链接
知道吗 :url="route.fullPath",地址,或 :url="{ agent: 'mona' }"A级
新设 url 从它开始表格.
在你的应用程序离开前,请检查一下: await handle.form.leave() 在路由器中 beforeRouteLeave,在删除前
<FieldiaForm>,在改变再次挂起它的道具之前page, (中文(简体) ),
form, (中文(简体) ), dataSource, (中文(简体) ), recordId, (中文(简体) ), resume, (中文(简体) ), url, (中文(简体) ), user, (中文(简体) ), context, (中文(简体) ), dir, (中文(简体) ), locale, (中文(简体) ),
labels中的名称 functions) (中文(简体) ). 立即卸下起落架,所以没有别的东西能把人留在那里. 这个
等待途中的保存,然后问 "放弃你的改变?"
工作有危险,当他们选择留下来时会回答错误. warn-on-leave 已经
浏览器本身的 Back, 重新装入或关闭标签先询问是否有更改
未保存 .
一个字段的组件或槽的内容,只要它能使它保持到
地点:它显示一个小盒子,它命名它, @error="(error, where) => …" 实值
告诉了,而且这个错误没有 越远Vue的树。 观众拒绝的一页说
为什么在表格的位置, @error 被告知, 应用程序会挂载。 麻省理工学院有执照.