manHourHousekeeper/fhKeeper/formulahousekeeper/plugIn/form-design-master/playground/src/App.vue

<template>
  <DesignForm :preview="true" ref="designForm" />
  <div @click="getDataJson()">获取数据</div>
  <div @click="setDataJson()">设置数据</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { DesignForm } from '@zmjs/form-design'

const designForm: any = ref(null)

function getDataJson() {
  console.log(designForm.value.getJson())
  console.log(JSON.stringify(designForm.value.getJson()))
}

function setDataJson() {
  let data = '{"list":[{"label":"单行文本", "allDisable":"true","type":"input","options":{"width":"100%","defaultValue":"","placeholder":"","maxlength":null,"prefix":"","suffix":"","prepend":"","append":"","disabled":false,"clearable":false,"readonly":false,"rules":{"trigger":"blur","enum":"","message":"","pattern":"","required":false,"type":"any"}},"key":"5o2w9yk","model":"plate1"}],"config":{"size":"default","hideRequiredAsterisk":false,"labelWidth":100,"labelPosition":"right"}}'
  console.log(JSON.parse(data))
  designForm.value.setJson(JSON.parse(data))
}
</script>

<style>
html,
body,
#app {
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>