Работа с данными
Виджет Editor поддерживает динамическую работу с данными, включая обновления в реальном времени, валидацию и сохранение по действию пользователя. Разработчики могут настраивать поведение виджета Editor в соответствии с требованиями приложения к согласованности данных и взаимодействию с пользователем.
Автоматическое сохранение данных при изменениях
Виджет Editor может запускать автоматическое сохранение данных при каждом изменении. Это полезно в сценариях, где периодическое взаимодействие с пользователем не гарантировано, или когда важно минимизировать ручные действия по сохранению.
<script setup>
import { Editor } from "@svar-ui/vue-editor";
</script>
<template>
<Editor :items="items" :autoSave="true" />
</template>
Свойство autoSave со значением true обеспечивает автоматическое сохранение всех изменений, снижая необходимость явных действий по сохранению со стороны пользователя.
Отключение автосохранения и требование ручного подтверждения
Виджет Editor поддерживает отключение автоматического сохранения, требуя от пользователей явного сохранения изменений. Это оптимальн о для рабочих процессов, где перед сохранением необходимо подтверждение или проверка данных пользователем.
<script setup>
import { Editor } from "@svar-ui/vue-editor";
</script>
<template>
<Editor :items="items" :autoSave="false" />
</template>
Установка autoSave в false предотвращает автоматическое сохранение, предоставляя пользователям контроль над тем, когда данные сохраняются.
Отслеживание изменений в данных Editor
Виджет Editor предоставляет подробную информацию об изменениях, внесённых в данные. Это полезно для отслеживания правок, реализации пользовательской логики или выделения несохранённых изменений.
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 может определять, когда пользователи явно запрашивают сохранение данных. Это полезно для реализации рабочих процессов, зависящих от действий пользователя, например отправки форм или подтверждения изменений.
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 позволяет отслеживать результаты валидации, предоставляя обратную связь о том, корректны ли данные или содержат ошибки. Это полезно для обеспечения целостности данных перед сохранением.
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 позволяет помечать отдельные поля как обязательные. Это гарантирует, что пользователи не смогут оставить эти поля пустыми, обеспечивая обязательный ввод данных.
<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 поддерживает определение пользовательских правил валидации для полей. Это гарантирует соответствие вводимых данных определённым критериям, таким как формат или диапазон значений.
<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 определяет сообщение об ошибке, отображаемое при неудачной валидации. Это обеспечивает точный контроль над требованиями к вводу.
Связанные примеры: