跳到主要内容

快速入门

本页介绍如何在 Svelte 应用中使用 SVAR Svelte Editor 组件。

第一步：安装包​

安装 editor 包和提供主题的核心 UI 库：

npm install @svar-ui/svelte-core
npm install @svar-ui/svelte-editor

或使用 yarn：

yarn add @svar-ui/svelte-core
yarn add @svar-ui/svelte-editor
note

该包已从 wx-svelte-editor 迁移至 @svar-ui/svelte-editor。在 Svelte SVAR 3.0 更新之前，我们将继续发布 wx-svelte-editor。

第二步：初始化编辑器​

导入 Editor 组件，并将其包裹在 Willow 主题中以应用默认样式：

<script>
  import { Willow } from '@svar-ui/svelte-core';
  import { Editor } from '@svar-ui/svelte-editor';
</script>

<Willow>
  <Editor />
</Willow>

Willow 为所有 SVAR widgets 添加必要的样式，建议将其放置在应用程序的顶层。若不使用它，Editor 将没有样式，需要手动添加。

第三步：添加表单字段​

要显示实际表单，请向编辑器传入 items 数组（字段定义）和 values 对象（初始数据）：

<script>
  import { Editor, Willow } from "@svar-ui/svelte-editor";

  const items = [
    { comp: "text", key: "name", label: "Name" },
    { comp: "text", key: "descr", label: "Description" },
    { comp: "text", key: "role", label: "Role" }
  ];

  const values = {
    name: "John Doe",
    descr: "Lorem ipsum dolor sit amet",
    role: "admin"
  };
</script>

<Willow>
  <Editor {items} {values} />
</Willow>

items 中的每个条目定义一个字段：comp 设置控件类型，key 将其与 values 中对应值关联，label 设置显示文本。

备注

为确保正确初始化，建议在应用程序顶层应用主题。如果单独使用 Editor 组件，请不要忘记将其包裹在主题中（上例中使用了 Willow 主题）。

后续步骤​

您现在已拥有一个包含表单字段的可用编辑器。接下来您可以配置显示模式、添加验证、自定义工具栏或切换至深色主题。