快速入门

第一步

要开始使用该 widget，请将所需的包添加到项目中。

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

或

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

将 widget 导入项目。

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

<Willow>
  <Editor />
</Willow>

Willow 组件作为默认主题包装器，为所有 SVAR widgets 添加必要的样式。Editor 组件可以在没有它的情况下运行，但将缺少样式，需要手动添加。建议将 Willow 标签放置在应用程序的顶层。

完整初始化代码

要查看 widget 的实际效果，请向其中添加一些条目。

<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>

备注

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

相关文章：

安装与初始化

第一步​

完整初始化代码​

第一步

完整初始化代码