amis-editor 注册自定义组件

建议先将amis文档从头到尾,仔细看一遍。
参考:amis - 低代码前端框架 

amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component,然后把其他属性作为 props 传递过去完成渲染。

import * as React from 'react';
import {Renderer} from 'amis-core';
@Renderer({  // amis-core/src/factory.tsx里的Renderer方法,主要作用识别json格式的type交给对应react组件来处理(现在可以识别{"type": "page", "title": "自定义组件示例"} )。type: 'page'// ... 其他信息隐藏了
})
export class PageRenderer extends React.Component {// ... 其他信息隐藏了render() {const { title, body,  render /*用来渲染孩子节点,如果当前是叶子节点则可以忽略。*/  } = this.props;return (<div className="page"><h1>{title}</h1><div className="body-container">{render('body', body,{// 这里的信息会作为 props 传递给子组件,一般情况下都不需要这个}) /*渲染孩子节点*/}</div></div>);}
}
// 如果不支持 Decorators 语法也可以使用如下写法
export Renderer({type: 'page'
})(class PageRenderer extends React.Component {render() {// ...同上}
})




 

React注册自定义组件:

1.比如:注册一个 React 组件,当节点的 type 是 my-renderer 时,交给当前组件来完成渲染。

import * as React from 'react';
import {Renderer} from 'amis';
@Renderer({type: 'my-renderer',autoVar: true // amis 1.8 之后新增的功能,自动解析出参数里的变量
})
class CustomRenderer extends React.Component {render() {const {tip} = this.props;return <div>这是自定义组件:{tip}</div>;}
}
有了以上这段代码后,就可以这样使用了:
{"type": "page","title": "自定义组件示例","body": {"type": "my-renderer","tip": "简单示例"}
}

如果这个组件还能通过 children 属性添加子节点,则需从props中获取body,  render处理(参考上面page组件)。

render(region, node, props) 方法,这个方法就是专门用来渲染子节点的。来看下参数说明:

* region 区域名称,你有可能有多个区域可以作为容器,请不要重复。

* node 子节点。

* props 可选,可以通过此对象跟子节点通信等。

属性支持变量

因为配置了 autoVar: true,使得所有组件参数将自动支持变量,在组件内拿到的将是解析后的值(ps: 1.8.0 及以上版本新增配置,之前版本需要调用 amis 里的 resolveVariableAndFilter 方法)

2.表单项FormItem的扩展(amis-core/src/renderes/Item)

以上是普通渲染器的注册方式,如果是表单项,为了更简单的扩充,请使用 FormItem 注解,而不是 Renderer。 原因是如果用 FormItem 是不用关心:label 怎么摆,表单验证器怎么实现,如何适配表单的 3 种展现方式(水平、上下和内联模式),而只用关心:有了值后如何回显,响应用户交互设置新值。

import * as React from 'react';
import {FormItem} from 'amis';
@FormItem({type: 'custom'
})
class MyFormItem extends React.Component {render() {const {value, onChange} = this.props;return (<div><p>这个是个自定义组件</p><p>当前值:{value}</p><aclassName="btn btn-default"onClick={() => onChange(Math.round(Math.random() * 10000))}>随机修改</a></div>);}
}

有了以上这段代码后,就可以这样使用了:

{"type": "page","title": "自定义组件示例","body": {"type": "form","body": [{"type": "custom","label": "随机值","name": "random"}]}
}

注意: 使用 FormItem 默认是严格模式,即只有必要的属性变化才会重新渲染,有可能满足不了你的需求,如果忽略性能问题,可以传入 strictMode: false 来关闭。

表单项开发主要关心两件事。

1.呈现当前值。如以上例子,通过 this.props.value 判定如果勾选了则显示已勾选,否则显示请勾选。

2.接收用户交互,通过 this.props.onChange 修改表单项值。如以上例子,当用户点击按钮时,切换当前选中的值。

至于其他功能如:label/description 的展示、表单验证功能、表单布局(常规、左右或者内联)等等,只要是通过 FormItem 注册进去的都无需自己实现。

需要注意,获取或者修改的是什么值跟配置中 type 并列的 name 属性有关,也就是说直接关联某个变量,自定义中直接通过 props 下发了某个指定变量的值和修改的方法。如果你想获取其他数据,或者设置其他数据可以看下以下说明:

* 获取其他数据 可以通过 this.props.data 查看,作用域中所有的数据都在这了。

* 设置其他数据 可以通过 this.props.onBulkChange, 比如: this.props.onBulkChange({a: 1, b: 2}) 等于同时设置了两个值。当做数据填充的时候,这个方法很有用。

3.其它高级定制

——自定义验证器

如果 amis 自带的验证能满足需求了,则不需要关心。组件可以有自己的验证逻辑。

@FormItem({  type: 'custom-checkbox' })
export default class CustomCheckbox extends React.Component {validate() {// 通过 this.props.value 可以知道当前值。return isValid ? '' : '不合法,说明不合法原因。';}// ... 其他省略了
}

上面的例子只是简单说明,另外可以做异步验证,validate 方法可以返回一个 promise。

——OptionsControl (amis-core/src/renderes/Options)

如果你的表单组件性质和 amis 的 Select、Checkboxes、List 差不多,用户配置配置 source 可通过 API 拉取选项,你可以用 OptionsControl 取代 FormItem 这个注解。

用法是一样,功能方面主要多了以下功能。

* 可以配置 options,options 支持配置 visibleOn hiddenOn 等表达式

* 可以配置 source 换成动态拉取 options 的功能,source 中有变量依赖会自动重新拉取。

* 下发了这些 props,可以更方便选项。

    * options 不管是用户配置的静态 options 还是配置 source 拉取的,下发到组件已经是最终的选项了。

    * selectedOptions 数组类型,当前用户选中的选项。

    * loading 当前选项是否在加载

    * onToggle 切换一个选项的值

    * onToggleAll 切换所有选项的值,类似于全选。

4.组件间通信

关于组件间通信,amis 中有个机制就是,把需要被引用的组件设置一个 name 值,然后其他组件就可以通过这个 name 与其通信,比如这个例子。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用,你需要把自己注册进去,默认自定义的非表单类组件并没有把自己注册进去,可以参考以下代码做添加:

import * as React from 'react';
import {Renderer, ScopedContext} from 'amis';
@Renderer({  type: 'my-renderer'})
export class CustomRenderer extends React.Component {static contextType = ScopedContext;constructor() {const scoped = this.context;scoped.registerComponent(this);}componentWillUnmount() {const scoped = this.context;scoped.unRegisterComponent(this);}// 其他部分省略了。
}

把自己注册进去了,其他组件就能引用到了。同时,如果你想找别的组件,也同样是通过 scoped 这个 context,如: scoped.getComponentByName("xxxName") 这样就能拿到目标组件的实例了(前提是目标组件已经配置了 name 为 xxxName)。

5.自定义组件接入事件动作

需求场景主要是想要自定义组件的内部事件暴露出去,能够通过对事件的监听来执行所需动作,并希望自定义组件自身的动作能够被其他组件调用。接入方法是通过`props.dispatchEvent`派发自身的各种事件,使其具备更灵活的交互设计能力;

通过重写`doAction`方法实现其他组件对其专属动作的调用,需要注意的是,此处依赖内部的 `Scoped Context`来实现自身的注册

amis/src/renderers中不同的组件可重写自己的doAction方法(实现自己的组件专属动作)

   可以直接调某一组件的doAction方法:comp.doAction()触发组件特有动作。 const values = await form.doAction( { type: 'submit' }, form.props.data, true );

   也可以通过onEvent配置组件特有动作(CmptAction)去触发对应组件的特有动作

自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法:

* env.fetcher 可以用来做 ajax 请求如: this.props.env.fetcher('xxxAPi', this.props.data).then((result) => console.log(result))

* env.confirm 确认框,返回一个 promise 等待用户确认如: this.props.env.confirm('你确定要这么做?').then((confirmed) => console.log(confirmed))

* env.alert 用 Modal 实现的弹框,个人觉得更美观。

* env.notify toast 某个消息 如: this.props.env.notify("error", "出错了")

* env.jumpTo 页面跳转。

大部分组件都是直接继承 RendererProps,里面包含渲染组件所需的常用属性. 例如:export interface PageProps extends RendererProps

 amis-editor注册自定义组件

比如antd按钮组件:

方法一:这里'amis-widget'的registerAmisEditorPlugin, registerRendererByType分别注册plugin插件和renderer渲染器。

src/plugins/AntdButton.tsx:

import type {BaseEventContext, RendererPluginEvent} from 'amis-editor-core';
import {getSchemaTpl} from 'amis-editor-core';
import {getEventControlConfig} from 'amis-editor/lib/renderer/event-control/helper';
import {Button, ButtonProps} from 'antd';
import React from 'react';export class AntdButtonPlugin {rendererName = 'antd-button';$schema = '/schemas/UnkownSchema.json';name = '按钮';description = 'Ant Design按钮预设模板';tags = ['Ant Design'];icon = 'fa fa-square';scaffold = {type: 'antd-button',content: 'Antd 按钮',block: false,danger: false,disabled: false,ghost: false,shape: 'default',size: 'middle',buttonType: 'primary'};previewSchema = {...this.scaffold};panelTitle = '按钮';events: RendererPluginEvent[] = [{eventName: 'onClick',eventLabel: '按钮点击',description: '按钮点击时触发',defaultShow: true}];panelBodyCreator = (context: BaseEventContext) => {const id = context.id;const manager = (window as any).store.editorManager;return getSchemaTpl('tabs', [{title: '基础',body: [{type: 'input-text',name: 'content',label: '按钮内容',value: 'Antd 按钮'},{type: 'switch',name: 'block',label: '将按钮宽度调整为其父宽度的选项',value: false},{type: 'switch',name: 'danger',label: '危险按钮',value: false},{type: 'switch',name: 'disabled',label: '禁用按钮',value: false},{type: 'switch',name: 'ghost',label: '幽灵属性',value: false},{type: 'input-text',name: 'href',label: '点击跳转的地址',value: undefined},{type: 'select',name: 'shape',label: '按钮形状',value: 'default',options: [{label: '默认',value: 'default'},{label: '圆形',value: 'circle'},{label: '圆弧',value: 'round'}]},{type: 'select',name: 'size',label: '按钮大小',value: 'middle',options: [{label: 'large',value: 'large'},{label: 'middle',value: 'middle'},{label: 'small',value: 'small'}]},{type: 'select',name: 'buttonType',label: '按钮类型',value: 'primary',options: [{label: '主要按钮',value: 'primary'},{label: '虚线按钮',value: 'dashed'},{label: '链接按钮',value: 'link'},{label: '文本按钮',value: 'text'},{label: '默认按钮',value: 'default'}]}]},{title: '事件',className: 'p-none',body: [getSchemaTpl('eventControl', {name: 'onEvent',...getEventControlConfig(manager, context)})]}]);};
}/**onClick={onClick? e => new Function(`return ${onClick}`)()(e): function onClick(e) {console.log('click');}}*/export function AntdButton({content,block,danger,disabled,ghost,href,shape,size,buttonType,onClick
}: ButtonProps & {buttonType: ButtonProps['type']; onClick: string}) {const type = buttonType;return (<Buttondanger={danger || false}disabled={disabled || false}type={type || 'primary'}block={block || false}ghost={ghost || false}href={href || undefined}shape={shape || 'default'}size={size || 'middle'}>{content || 'Antd 按钮'}</Button>);
}

src/plugins/index.ts中进行plugin注册:

//@ts-ignore
import {registerAmisEditorPlugin, registerRendererByType} from 'amis-widget';// import {registerEditorPlugin} from 'amis-editor';
// import {AntdCalendarPlugin, AntdCalendar} from './AntdCalendar';
// registerEditorPlugin(AntdCalendarPlugin)import './AntdCalendar';import {AntdButtonPlugin, AntdButton} from './AntdButton';
import {AntdDropdownPlugin, AntdDropdown} from './AntdDropdown';
import {ProCRUDPlugin, ProCRUD} from './ProCRUD';
import {ChartPiePlugin, ChartPie} from './ChartPie';
import {ChartScatterPlugin, ChartScatter} from './ChartScatter';
import {ChartMapPlugin, ChartMap} from './ChartMap';enum Usage {renderer = 'renderer',formitem = 'formitem',options = 'options'
}
enum Framework {react = 'react',vue2 = 'vue2',vue3 = 'vue3',jquery = 'jquery'
}const plugins = [{type: 'antd-button',plugin: AntdButtonPlugin,component: AntdButton},{type: 'antd-dropdown',plugin: AntdDropdownPlugin,component: AntdDropdown},{type: 'pro-crud',plugin: ProCRUDPlugin,component: ProCRUD},{type: 'chart-pie',plugin: ChartPiePlugin,component: ChartPie},{type: 'chart-scatter',plugin: ChartScatterPlugin,component: ChartScatter},{type: 'chart-map',plugin: ChartMapPlugin,component: ChartMap},
];export default () => {plugins.forEach(({type, plugin, component}) => {registerAmisEditorPlugin(plugin);registerRendererByType(component, {type,usage: Usage.renderer,weight: 99,framework: Framework.react});});
};

方法二:采用amis-editor的registerEditorPlugin注册plugin插件。 amis的@Renderer 注册renderer渲染器

src/plugins/AntdCalendar.tsx:

import {Calendar, CalendarProps} from 'antd';
import React from 'react';
import {Renderer, RendererProps} from 'amis';
import {BasePlugin, registerEditorPlugin} from 'amis-editor';export class AntdCalendarPlugin extends BasePlugin{rendererName = 'antd-calendar';$schema = '/schemas/UnkownSchema.json';name = '日历';description = 'Ant Design日历预设模板';tags = ['Ant Design'];icon = 'fa fa-calendar';scaffold = {type: 'antd-calendar',fullscreen: false};previewSchema = {...this.scaffold};panelTitle = '日历';panelControls = [{type: 'switch',name: 'fullscreen',label: '是否全屏',value: false}];
}// @Renderer({
//   type: 'antd-calendar',
//   name: 'antd-calendar',
//   autoVar: true
// })
// export class AntdCalendar extends React.Component<RendererProps> {
//   render() {
//     const {fullscreen} = this.props;
//     return <Calendar fullscreen={fullscreen || false} />;
//   }
// }export function AntdCalendar({fullscreen}: RendererProps) {return <Calendar fullscreen={fullscreen || false} />;
}
Renderer({type: 'antd-calendar',name: 'antd-calendar',autoVar: true
})(AntdCalendar);registerEditorPlugin(AntdCalendarPlugin);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux开发讲课17--- 在shell脚本中,如何将一个命令存储在一个变量中

问&#xff1a; 将一个命令保存到一个变量中&#xff0c;以便稍后再使用&#xff08;不是命令的输出&#xff0c;而是命令本身&#xff09;。 有一个简单的脚本如下&#xff1a; command"ls"; echo "Command: $command"; #Output is: Command: ls b$com…

c++ 给定一个非常巨大的数组,如何找到它的中值

快速选择算法&#xff08;最优解&#xff09; #include <iostream> #include <vector> #include <algorithm>using namespace std;class Solution { private:// 快速选择算法中的分区函数int partition(vector<int>& nums, int left, int right)…

逆向学习汇编篇:参数传递与返回地址的使用

本节课在线学习视频&#xff08;网盘地址&#xff0c;保存后即可免费观看&#xff09;&#xff1a; ​​https://pan.quark.cn/s/b5b046015da2​​ 在汇编语言中&#xff0c;函数调用和参数传递是编程的基础组成部分。了解如何在汇编中传递参数以及如何处理返回地址对于逆向工…

LeetCode 78. 子集

更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡&#xff0c;更多解法等你一起来参与哦&#xff01; LeetCode 78. 子集&#xff0c;难度中等。 迭代 解题思路&#xff1a; 初始化结果集 result&#xff0c;其中包含一个空集 []&#xff1b;遍历数…

flex讲解

随着前端技术的不断发展和更新&#xff0c;flex布局成为前端布局的主流。但是仍然有很多前端新手搞不懂flex到底怎么用&#xff01;&#xff01;&#xff01;今天我们就来好好讲讲flex布局 老规矩先上定义 什么是flex布局 布局的传统解决方案&#xff0c;基于盒状模型&#x…

郑州高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

随着制造业的转型升级&#xff0c;智能化、信息化已成为制造业发展的必然趋势。数字孪生技术作为智能制造领域的关键技术之一&#xff0c;它通过构建与实体系统相对应的虚拟模型&#xff0c;实现对实体系统的实时监测、预测和优化&#xff0c;为制造业的智能化、信息化提供了强…

LitelDE安装---附带每一步截图以及测试

LiteIDE LiteIDE 是一款专为Go语言开发而设计的开源、跨平台、轻量级集成开发环境&#xff08;IDE&#xff09;&#xff0c;基于 Qt 开发&#xff08;一个跨平台的 C 框架&#xff09;&#xff0c;支持 Windows、Linux 和 Mac OS X 平台。LiteIDE 的第一个版本发布于 2011 年 …

PTA-线性表实验(JAVA)

题目1&#xff1a;Josephus环的问题及算法 【实验内容】 编程实现如下功能&#xff1a; 题意说明&#xff1a;古代某法官要判决n个犯人的死刑&#xff0c;他有一条荒唐的法律&#xff0c;将犯人站成一个圆圈&#xff0c;从第start个犯人开始数起&#xff0c;每数到第distance的…

【Spring Boot AOP通知顺序】

文章目录 一、Spring Boot AOP简介二、通知顺序1. 通知类型及其顺序示例代码 2. 控制通知顺序示例代码 一、Spring Boot AOP简介 AOP&#xff08;Aspect-Oriented Programming&#xff0c;面向切面编程&#xff09;是对OOP&#xff08;Object-Oriented Programming&#xff0c…

使用Dockerfile构建镜像 使用docker-compose 一键部署IM项目

本文讲解&#xff1a;使用Dockerfile构建镜像 & 使用docker-compose 一键部署IM项目。 im项目地址&#xff1a;xzll-im &#xff0c;欢迎志同道合的开发者 一起 维护&#xff0c;学习&#xff0c;欢迎star &#x1f604; 1、Dockerfile编写与镜像构建&容器运行 Dockerf…

Spring Boot中使用Thymeleaf进行页面渲染

Spring Boot中使用Thymeleaf进行页面渲染 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot应用中使用Thymeleaf模板引擎进行页面…

Nginx和CDN运用

一.Web缓存代理 1.工作机制 代替客户机向网站请求数据&#xff0c;从而可以隐藏用户的真实IP地址。将获得的网页数据&#xff08;静态Web元素&#xff09;保存到缓存中并发送给客户机&#xff0c;以便下次请求相同的数据时快速响应。 2.代理服务器的概念 代理服务器是一个位…

Kubernetes面试整理-如何监控Kubernetes集群的健康和性能?

监控 Kubernetes 集群的健康和性能是确保集群稳定运行的重要任务。以下是一些常用的方法和工具来监控 Kubernetes 集群: 1. Prometheus 和 Grafana Prometheus 是一个开源的系统监控和报警工具,Grafana 是一个开源的分析和监控平台。两者通常一起使用来监控 Kubernetes 集群。…

k8s token加新节点

在 master 节点执行 kubeadm token create --print-join-command得到token和cert&#xff0c;这两个参数在2个小时内可以重复使用&#xff0c;超过以后就得再次生成 kubeadm join apiserver.k8s.com --token mpfjma.4vjjg8flqihor4vt --discovery-token-ca-cert-hash sha…

【入门】5分钟了解卷积神经网络CNN是什么

本文来自《老饼讲解-BP神经网络》https://www.bbbdata.com/ 目录 一、卷积神经网络的结构1.1.卷积与池化的作用2.2.全连接层的作用 二、卷积神经网络的运算2.1.卷积层的运算2.2.池化的运算2.3.全连接层运算 三、pytorch实现一个CNN例子3.1.模型的搭建3.2.CNN完整训练代码 CNN神…

【Dison夏令营 Day 04】如何用 Python 编写简单的数字猜谜游戏代码

上个周末&#xff0c;我整理了一份可以用 Python 编写的游戏列表。但为什么呢&#xff1f; 如果您是 Python 程序员初学者&#xff0c;编写有趣的游戏可以帮助您更快更好地学习 Python 语言&#xff0c;而不会被语法之类的东西所困扰。我在学习 Python 的时候曾制作过一些这样…

Hadoop-03-Hadoop集群 免密登录 超详细 3节点公网云 分发脚本 踩坑笔记 SSH免密 服务互通 集群搭建 开启ROOT

章节内容 上一节完成&#xff1a; HDFS集群XML的配置MapReduce集群XML的配置Yarn集群XML的配置统一权限DNS统一配置 背景介绍 这里是三台公网云服务器&#xff0c;每台 2C4G&#xff0c;搭建一个Hadoop的学习环境&#xff0c;供我学习。 之前已经在 VM 虚拟机上搭建过一次&…

短视频矩阵系统搭建APP源码开发

前言 短视频矩阵系统不仅有助于提升品牌影响力和营销效率&#xff0c;还能帮助企业更精准地触达目标受众&#xff0c;增强用户互动&#xff0c;并利用数据分析来持续优化营销策略。 一、短视频矩阵系统是什么&#xff1f; 短视频矩阵系统是一种通过多个短视频平台进行内容创作…

Vue 3 实战教程(快速入门)

Vue 3 实战教程&#xff08;快速入门&#xff09; Vue.js 是一个用于构建用户界面的渐进式框架&#xff0c;Vue 3 是 Vue 的最新版本&#xff0c;带来了许多改进和新特性。本文将通过一个简单的项目示例&#xff0c;带你快速入门 Vue 3 的基础使用。 环境设置 安装 Node.js …

多多代播24小时值守:电商直播时代是带货爆单的关键

在电商直播盛行的今天&#xff0c;直播带货已成为品牌与消费者沟通的关键。然而&#xff0c;流量波动大&#xff0c;竞争激烈&#xff0c;使品牌面临诸多挑战。因此&#xff0c;许多品牌寻求专业代播服务&#xff0c;并特别强调24小时值守的重要性。 流量来源的不稳定性是一个显…