公共组件

本模块中提供了一些常用的组件，这里将逐一举例。

🎉 使用以下组件时均有代码提示和注释。

AmisEditor 组件

该组件主要用处为编辑页面并生成 Amis 配置。

<template>
  <amis-editor :value="schema" @change="(value) => (schema = value)" />
  <amis-render :schema="schema" />
</template>

<script setup lang="ts">
import type { SchemaObject } from "amis";

const schema = ref<SchemaObject>({
  type: "page",
  title: "Hello Nuxt",
  body: "Hello Nuxt",
});

setTimeout(() => {
  schema.value = {
    type: "page",
    title: "Hello Amis",
    body: "Hello Amis",
  };
}, 3000);
</script>

AmisRender 组件

该组件主要用处为渲染 Amis 配置。

<template>
  <amis-editor :value="schema" @change="(value) => (schema = value)" />
  <amis-render :schema="schema" />
</template>

<script setup lang="ts">
import type { SchemaObject } from "amis";

const schema = ref<SchemaObject>({
  type: "page",
  title: "Hello Nuxt",
  body: "Hello Nuxt",
});

setTimeout(() => {
  schema.value = {
    type: "page",
    title: "Hello Amis",
    body: "Hello Amis",
  };
}, 3000);
</script>
Edit this page on GitHub
Table of Contents