跳到主要内容

入门指南

第一步​

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

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

或

yarn add @svar-ui/vue-core
yarn add @svar-ui/vue-editor

将 widget 导入到项目中。为确保所有元素正确显示，请导入主题和样式。

<script setup>
import { Willow } from '@svar-ui/vue-core'; //import theme
import { Editor } from '@svar-ui/vue-editor';
import "@svar-ui/vue-editor/all.css"; //import styles
</script>

<template>
  <Willow>
    <Editor />
  </Willow>
</template>

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

完整初始化代码​

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

<script setup>
import { Editor, Willow } from "@svar-ui/vue-editor";
import "@svar-ui/vue-editor/all.css"; //import styles

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>

<template>
  <Willow>
    <Editor :items="items" :values="values" />
  </Willow>
</template>
备注

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

相关文章：