跳到主要内容

数据处理

Editor widget 支持动态数据处理，包括实时更新、验证和用户触发的保存操作。开发者可以自定义 Editor widget 的行为，以满足应用程序对数据一致性和用户交互的需求。

自动保存数据变更​

Editor widget 可在每次发生变更时自动触发数据保存。在无法保证用户定期交互的场景中，或在优先减少手动保存操作的场景中，此功能非常有用。

<script setup>
   import { Editor } from "@svar-ui/vue-editor";
</script>

<template>
   <Editor :items="items" :autoSave="true" />
</template>

将 autoSave 属性设置为 true，可确保所有变更自动保存，从而减少用户执行显式保存操作的需要。

禁用自动保存并要求用户手动操作​

Editor widget 支持禁用自动保存，要求用户显式保存其变更。此功能适用于在保存前需要用户确认或审查的工作流。

<script setup>
   import { Editor } from "@svar-ui/vue-editor";
</script>

<template>
   <Editor :items="items" :autoSave="false" />
</template>

将 autoSave 设置为 false 可阻止自动保存，让用户自行控制数据的保存时机。

检测 Editor 数据变更​

Editor widget 提供有关数据变更的详细信息。此功能适用于跟踪修改、实现自定义逻辑或高亮显示未保存的变更。

interface OnChangeResult {
   key: string;
   value: any;
   update: Record<string, any>;
}
<script setup>
   import { Editor } from "@svar-ui/vue-editor";

   const items = [
      { comp: "text", key: "name", label: "Name" },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onchange(ev: OnChangeResult) {
      console.log(`field ${ev.key} was changed to ${ev.value}`);
      console.log("all not saved changes", ev.update);
   }
</script>

<template>
   <Editor :items="items" :onchange="onchange" />
</template>

onchange 事件处理程序提供字段键、更新后的值以及所有未保存变更的映射，从而实现对修改的精细跟踪。

检测用户触发的保存操作​

Editor widget 可检测用户何时显式请求保存数据。此功能适用于依赖用户操作的工作流，例如提交表单或确认变更。

interface OnSaveResult {
   changes: string[];
   values: Record<string, any>;
}
<script setup>
   import { Editor } from "@svar-ui/vue-editor";

   const items = [
      { comp: "text", key: "name", label: "Name" },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onsave(ev: OnSaveResult) {
      console.log("changed values", ev.changes);
      console.log("latest data snapshot", ev.values);
   }
</script>

<template>
   <Editor :items="items" :onsave="onsave" />
</template>

onsave 事件处理程序提供已变更字段的信息以及当前数据状态。

检测数据的验证状态​

Editor widget 支持监控验证结果，提供数据是否有效或包含错误的反馈。此功能有助于在保存前确保数据完整性。

interface OnValidationResult {
   errors: {
      [key: string]: {
        errorType: "validation" | "required";
      };
   };
   values: Record<string, any>;
}
<script setup>
   import { Editor } from "@svar-ui/vue-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name",
        validation: v => (v && v.length > 5),
        validationMessage: "Name must be longer than 5 characters",
        required: true
      },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onvalidation(ev: OnValidationResult) {
      if (Object.keys(ev.errors).length > 0) {
        for (const key in ev.errors) {
           if (ev.errors[key].errorType === "required") {
              console.log(`"${key}" is required but missing`);
           } else if (ev.errors[key].errorType === "validation") {
              console.log(`"${key}" failed a custom validation rule`);
           }
        }
      } else {
        console.log("validation is ok");
      }

      console.log("latest data snapshot", ev.values);
   }
</script>

<template>
   <Editor :items="items" :onvalidation="onvalidation" />
</template>

onvalidation 事件处理程序提供当前数据状态和验证错误信息，有助于识别验证失败的字段，并确保数据满足预定义要求。

将字段标记为必填​

Editor widget 支持将特定字段标记为必填，确保用户不能将这些字段留空，从而强制要求必要的数据输入。

<script setup>
   import { Editor } from "@svar-ui/vue-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        required: true,
      },
   ];
</script>

<template>
   <Editor :items="items" />
</template>

将 required 属性设置为 true 可使该字段成为必填项，用户必须提供值才能继续操作。

为字段定义验证规则​

Editor widget 支持为字段定义自定义验证规则，确保用户输入符合特定条件，例如格式或值范围。

<script setup>
   import { Editor } from "@svar-ui/vue-editor";

   const items = [
      { comp: "text", key: "name", label: "Name",
        validation: val => {
          const regEx = /^[a-zA-Z]+$/;
           return val && regEx.test(val);
        },
        validationMessage: "wrong name format"
      },
   ];
</script>

<template>
   <Editor :items="items" />
</template>

validation 属性定义用于检查字段值的函数，validationMessage 指定验证失败时显示的错误信息。这样可以对输入要求进行精确控制。

相关示例：