在vue3中使用amis编辑器

官方文档：aisuda.bce.baidu.com/amis/zh-CN/…

搭建amis环境

1. 需要引入的依赖（目前使用的版本和官网的一致，如果版本较低可能会导致某些功能无法正常使用）

"amis": "6.5.0",
"amis-core": "6.5.0",
"amis-editor": "6.5.0",
"amis-editor-core": "6.5.0",
"amis-theme-editor": "2.0.10",
"amis-theme-editor-helper": "2.0.26",
"amis-ui": "6.5.0",
"mobx": "^4.5.0",
"mobx-react": "^6.3.1",
"mobx-state-tree": "^3.17.3",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"veaury": "^2.3.18"
  

Veaury 是一个基于 React 和 Vue3 的工具库，主要用于React和Vue在一个项目中公共使用的场景。

由于amis-editor是基于react实现的，导致有些组件无法在项目中直接使用，所以就需要引入veaury这个插件。

2. 测试是否安装成功

<template>
  <AmisSelect :placeholder="'切换语言'"
              :options="[
                {label: '简体中文',value: 'zh-CN',},
                {label: 'English',value: 'en-US',}
              ]" />
</template>

<script setup>
// 引入一些样式依赖
import "amis-ui/lib/themes/default.css";
import "amis-ui/lib/themes/cxd.css";
import "amis-editor-core/lib/style.css";

//引入amis库中的选择框
import { Select } from "amis";
import { applyReactInVue } from "veaury";

const AmisSelect = applyReactInVue(Select);//AmisSelect这个名字可以随便取
</script>


<style scoped>

</style>

效果图：

3. 渲染amis-editor

<template>
  <div style="height:100%">
    <AmisEditor id="editorName"
                theme="cxd"
                className="test-amis-editor"
                :preview="previewModel"
                :isMobile="mobileModel"
                :value="schema"
                :onChange="editorChanged" />
  </div>

</template>

<script setup>
// 引入一些样式依赖
import "amis-ui/lib/themes/default.css";
import "amis-ui/lib/themes/cxd.css";
import "amis-editor-core/lib/style.css";

import { applyReactInVue } from "veaury";

import { Editor } from "amis-editor"; //引入编辑器

import { ref, reactive } from "vue";
import textData from "./textJson";
const AmisEditor = applyReactInVue(Editor); //使用编辑器

const previewModel = ref(false); //是否预览,实际开发中，如果需要编辑和预览，可以写一个change事件来改变这个值的状态
const mobileModel = ref(false); //是否是手机模式

const schema = reactive({}); //渲染表单的内容

const editorChanged = (value) => {
  //编辑器内容变化后触发的方法
  console.log("编辑器内容变化了。。。。");
   //todo  如果需要将数据保存，在这里可以操作
};
</script>


<style scoped>
:deep(.test-amis-editor) {
  height: 100% !important;
  overflow-y: auto;
}
</style>

schema值为{}时，且为编辑时的效果图

如果需要将下面的对象渲染在页面上，则只需要将schema对应的值修改即可。

 {
  type: 'page',
  id: 'u:24df2eabf028',
  asideResizor: false,
  pullRefresh: {
    disabled: true,
  },
  regions: ['body'],
  body: [
    {
      type: 'input-text',
      label: '年龄',
      name: 'age',
      id: 'u:90859eed76eb',
      mode: 'horizontal',
    },
  ]
}

当preview为true时，效果如下

一些参数的说明可以参考文档：aisuda.bce.baidu.com/amis/zh-CN/…