安装
npm i amis
main.ts中添加
import 'amis/sdk/sdk.js';
import 'amis/lib/themes/default.css';
写好子组件
<template>
<div id="box"></div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
console.log("ces ");
const props= defineProps({
amisjson: {
type: Object,
required: true
}
})
onMounted(() => {
// @ts-ignore
var amis = amisRequire('amis/embed');
console.log(amis);
let amisScoped = amis.embed('#box', props.amisjson);
})
</script>
使用
<template>
<amis :amisjson="amisjson"></amis>
</template>
<script setup lang="ts">
import amis from "../components/AmisReanderer.vue";
const amisjson={
type: 'page',
title: '表单页面',
body: {
type: 'form',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: 'Name',
type: 'input-text',
name: 'name'
},
{
label: 'Email',
type: 'input-email',
name: 'email'
}
]
}
}
</script>
效果展示
只做了基础
可根据需求依照amis文档做自己需要的调整
amis挺好一框架 github 7.7k的星星了
但是 官方维护不积极 然后导致的社区也不活跃
出问题查个资料都难
