vue2+amis初阶使用+获取表单值

功能：通过后台数据json实时更换表格，确实amis是不错的选择，但是基于react…

第一种方法

yarn add amis@1.9.0

同时需要安装typescript react vuera react-dom copy-to-clipboard (后两个好像后续没用到了，但是之前测试的时候我安装了，react安装17.0.0版本)
vue需要使用的文件中：

 <divref="box"style="text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 20px">基本信息</div>

mounted() {let amis = amisRequire('amis/embed')let amisScoped = amis.embed(this.$refs.box, {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'}]}})
}

如果你全局没有碰到无法拿到amisRequire可以直接在main.js引入：

import 'amis/sdk/sdk'
import 'amis/sdk/sdk.css'
import 'amis/sdk/iconfont.css'
import 'amis/sdk/helper.css'

如果你碰见了拿不到值得情况，死方法，将node_modules的amis的文件夹sdk拿出来放在Public文件下，这里我们将sdk文件夹改名成了amis：

然后在Index.html中引入：

然后就有效果出来了：

获取表单信息：

let amisScoped = amis.embed(this.$refs.box, {//我们的json})

然后通过amisScoped.getComponentByName(‘page1.form1’).getValues()
获取，这里如果写在mounted里面获取不到，button点击事件中可以获取到

：）能有更好的方法建议不用，主要是领导非要我用，吐槽一下，坑的要死，花了一天时间，网上只有vue3+amis。
这里还有一篇github上面的别人写好的demo，但是版本比较低，我用起来也是各种踩坑，react冲突不定义之类的问题：
https://github.com/FatDong1/amis-admin

第二种方法

直接将react转换vue(vuera)
react 16.14.0
react-dom16.14.0
amis 1.9.0
vuera 0.2.7
直接copy官网react demo 创建一个新的文件AMISComponent.js

import React from 'react'
import axios from 'axios'
import copy from 'copy-to-clipboard'import { render as renderAmis } from 'amis'
import { toast } from 'amis/lib/components/Toast'
import 'amis/lib/themes/default.css'const env = {// 下面三个接口必须实现fetcher: ({ url, method, data, responseType, config, headers }) => {config = config || {}config.withCredentials = trueresponseType && (config.responseType = responseType)if (config.cancelExecutor) {config.cancelToken = new axios.CancelToken(config.cancelExecutor)}config.headers = headers || {}if (method !== 'post' && method !== 'put' && method !== 'patch') {if (data) {config.params = data}return axios[method](url, config)} else if (data && data instanceof FormData) {config.headers = config.headers || {}config.headers['Content-Type'] = 'multipart/form-data'} else if (data &&typeof data !== 'string' &&!(data instanceof Blob) &&!(data instanceof ArrayBuffer)) {data = JSON.stringify(data)config.headers = config.headers || {}config.headers['Content-Type'] = 'application/json'}return axios[method](url, data, config)},isCancel: (value) => axios.isCancel(value),copy: (content) => {copy(content)toast.success('内容已复制到粘贴板')}
}class AMISComponent extends React.Component {constructor(props) {super(props)console.log('props: ', props)}render() {return renderAmis(// 这里是 amis 的 Json 配置。this.props.schema,{// props...},env)}
}export default AMISComponent

引入：

schema数据：

      schema: {type: 'page',body: {type: 'form',api: '/api/form',body: [{type: 'input-text',name: 'name',label: '姓名：'},{name: 'email',type: 'input-email',label: '邮箱：'}]}}

获取表单信息：
在js文件中添加：

这里的ref就相当于amisScoped

然后相当于父子传值拿到ref，按钮点击触发获取值

amis表单change事件实时获取表单数据

{type: 'page',name: 'page2',body: {type: 'form',name: 'form3',onEvent: {change: {actions: [{actionType: 'custom',script: 'console.log(event)'}]}},// submitOnChange: true,body: [{label: 'Name',type: 'input-text',name: 'name1'},{label: 'age',type: 'input-text',name: 'name2'}]}}

这里我们加入event事件，onchange监听，使用custom，然后将js写在script里面就可以获取change改变时候得数据，这里注意事件版本要求1.7.0+

vue2 data()this指向问题解决方案：
网上百度的各种方法真是各种奇葩
因为这里我们使用的是vue，数据里面如果需要使用this，是拿不到的，这里我们可以使用箭头函数更改this指向：