在Vue3.0中使用Amis 簡單用法

安裝

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的星星了
但是 官方維護不積極 然后導致的社區也不活躍
出問題查個資料都難