amis-editor 低代码可视化编辑器开发 和 使用说明

news2024/12/23 17:58:45

 1.amis-editor可视化编辑器 React版本(推荐): GitHub - aisuda/amis-editor-demo: amis 可视化编辑器示例 https://aisuda.github.io/amis-editor-demo

建议使用react版本,好维护,升级版本更新package.json中对应版本号即可。

2. vue-amis-sdk(vue版本 vuera转换react为vue )来实现amis-editor低代码编辑器.(仅供参考,不推荐使用此方式)

 升级eceditor俩种方式:

1.跟随vue-amis-sdk版本

首先package.json中升级vue-amis-sdk版本,然后下载vue-amis-sdk项目源码vue-amis-sdk-master,从sdk目录下拷贝最新对应的amis umd打包js css等资源到ec-editor中.

build前直接放到public目录  /vue-amis-sdk.umd.min.js

build后需放到public/js目录 /js/vue-amis-sdk.umd.min.js

2.自己进行升级.

将vue-amis-sdk-master中package.json里amis-editor amis等版本升级.  并下载amis源码,进行umd打包. 然后再将vue-amis-sdk-master打包到npm上或直接嵌入使用

可视化使用说明(操作手册)

  1. 主要包含功能点

操作手册:amis - 低代码前端框架

顶部:操作区

右侧:中英文切换,可以切换编辑器的语言、预览、保存操作。

左侧:面板与操作区

大纲面板:可以调整页面内的组件树结构

物料面板:可以查找组件,并在此拖动组件到编辑器画布中

源码面板:可以编辑页面级别的 JavaScript 代码和 CSS 配置

中部:可视化页面编辑画布区域

点击组件在右侧面板中能够显示出对应组件的属性配置选项

拖拽修改组件的排列顺序

将组件拖拽到容器类型的组件中

右侧:组件级别配置

选中的组件:从页面开始一直到当前选中的组件位置,点击对应的名称可以切换到对应的组件上

选中组件的配置:当前组件的大类目选项,根据组件类型不同,包含如下子类目:

常规:组件的基础属性值设置

接口:组件的请求接口配置

外观:组件的样式配置

事件:绑定组件对外暴露的事件

其他:数据源映射、分页等设置

2.组件使用

Amis自带了很多组件,基本上满足日常的简单开发使用。

具体可以看下官方的介绍:

https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/schema

可以直接在左侧组件库拖拽到画布中。

还可以在官方组件库文档中找到需要的组件,复制组件代码,放在代码编辑区中。

官方组件库地址:

https://aisuda.bce.baidu.com/amis/zh-CN/components/page

找到想要的组件,点击编辑代码。在右侧的弹窗中选中type为table的json复制到我们的页面中。

amis组件是可以嵌套使用的,在body中继续添加即可。

再复制一个claendar组件放到table组件下:

每个组件的属性是不同的,但配置方式都是大同小异。

以select下拉框为例,选择select组件,在右侧属性中可对select组件进行配置:

然后点击预览可查看配置的页面:

每个组件支持哪些功能,具体可查看官方组件文档中的介绍,比如select下拉选组件

https://aisuda.bce.baidu.com/amis/zh-CN/components/form/select

3.amis样式使用

amis 中有大量的已定义的功能类 class 可以使用

具体介绍可查看官方对amis样式的介绍:

amis - 低代码前端框架

一、通过内置的class 样式进行调整

内置class样式:https://aisuda.bce.baidu.com/amis/zh-CN/style/layout/box-sizing

二、通过wrapper组件的style属性,写css样式(或者从右侧外观处选择样式)

原生css属性名转驼峰即可。 比如box-shadow  ->  boxShadow

三、通过组件外观的自定义样式写css原生样式

css属性直接用即可。比如 box-shadow。(需用检查 看一下需要改组件的那个class样式)

4.事件动作使用

事件动作的官方介绍

amis组件支持很多事件配置,具体可查看:

https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action

在amis编辑器中配置事件动作

以按钮为例,配置一个点击事件。

先选中按钮找到右侧面板的事件配置,添加一个点击事件:

然后给这个点击事件绑定一个具体要执行的动作:

我们这里选择打开一个弹窗的动作

然后点击预览可查看页面

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

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

相关文章

Property xxx does not exist on type ‘Window typeof globalThis‘ 解决方法

问题现象 出现以上typescript警告,是因为代码使用了window的非标准属性,即原生 window 对象上不存在该属性。 解决办法 在项目 根目录 或者 src目录 下新建 xxx.d.ts 文件,然后进行对该 属性 进行声明即可。 注意:假如xxx.d.ts文…

【vue】封装的天气展示卡片,在线获取天气信息

源码 <template><div class"sen_weather_wrapper"><div class"sen_top_box"><div class"sen_left_box"><div class"sen_top"><div class"sen_city">山东</div><qctc-time cl…

【Text2SQL 经典模型】X-SQL

论文&#xff1a;X-SQL: reinforce schema representation with context ⭐⭐⭐⭐ Microsoft, arXiv:1908.08113 X-SQL 与 SQLova 类似&#xff0c;使用 BERT style 的 PLM 来获得 representation&#xff0c;只是融合 NL question 和 table schema 的信息的方式不太一样&#…

Keil MDK map文件学习笔记

Keil MDK map文件学习笔记 map文件组成1.Section Cross References段交叉引用2.Removing Unused input sections from the image移除无用的段3.Image Symbol Table镜像符号表局部符号表全局符号表 4.Memory Map of the image镜像存储器映射ROM区执行域RAM区执行域 5. Image com…

C#学习指南:重要内容与实用技巧

学习C#编程是一段充满挑战但又非常充实的旅程。以下是我在学习过程中积累的一些经验&#xff0c;希望能对大家有所帮助。 一、掌握基础概念 类及其成员 C#中的类是编程的基础模块。理解类的结构、属性、方法和构造函数是至关重要的。每个类都有其特定的功能&#xff0c;学会如…

Milvus 使用过程中的常见问题集锦

引言 在使用Milvus的过程中&#xff0c;可能会遇到一些常见问题。这些问题可能涉及到配置、查询、数据同步等方面。 常见问题 以下是一些可能遇到的常见问题及其解决方法&#xff1a; 查询结果不正确&#xff1a; 可能原因&#xff1a;Milvus内部缓存与数据不一致&#xff0…

【数据结构】哈夫曼树和哈夫曼编码

一、哈夫曼树 1.1 哈夫曼树的概念 给定一个序列&#xff0c;将序列中的所有元素作为叶子节点构建一棵二叉树&#xff0c;并使这棵树的带权路径长度最小&#xff0c;那么我们就得到了一棵哈夫曼树&#xff08;又称最优二叉树&#xff09; 接下来是名词解释&#xff1a; 权&a…

APISIX-简单使用

APISIX-简单使用 这个工具还是很不错的&#xff0c;可视化的配置很清晰 &#xff0c; 想用NGINX的配置模式也是可以的&#xff0c;就是要去修改配置文件了。 APISIX&#xff0c;一个很不错的可视化工具&#xff0c;用来代替Nginx相当不错&#xff0c;可作为Nginx的平替方案&…

Leecode热题100---45:跳跃游戏②

题目&#xff1a; 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。 返回到达 nums[n - 1] 的最小跳跃次数。 思路&#xff1a; 如果某一个作为 起跳点 的格子可以跳跃的距离是 3&#xff0c;那么表示后面…

解耦:哪些方法可以用来解耦代码

目录 1.引用 2.为何解耦如此重要 3.如何判断代码是否需要解耦 4.如何给代码解耦 5.思考题 1.引用 前面我们曾经讲到&#xff0c;重构可以分为大型重构和小型重构。小型重构的主要目的是提高代码的可读性&#xff0c;大型重构的主要目的是解耦。本节讲解如何对代码进行解耦…

用python为目录下的文件生成索引

好久没写文章了。 有一个需求&#xff1a; 我的一个目录下有很多的.html文件&#xff0c; 每个html会包含一些image &#xff0c;但都在各自的目录中。 .html特别多&#xff0c;有好几百个&#xff0c;我需要一个index.hmtl把这些html全部索引起来&#xff0c;使得我一个点击&a…

计算机如何将输入文字显示出来的?渲染Image rendering

1.文字渲染的简单理解 渲染图像&#xff0c;可以理解为用cpu/gpu构造出原本不存在的图像。比如输入计算机的英文字符都是ASCII码&#xff0c;而我们在屏幕上看到显示的字符对应的应该是RGB/YUV的像素。计算机把ASCII字符转化成像素的过程就是文字渲染。又比如我们GPU用多个2D图…

全同态加密生态项目盘点:FHE技术的崛起以及应用

撰文&#xff1a;Chris&#xff0c;Techub News 在当今数字化的时代&#xff0c;隐私保护已成为一个全球性的焦点话题&#xff0c;特别是在加密货币和区块链技术快速发展的背景下。虽然当前的隐私技术在保护数据安全方面多有欠缺&#xff0c;引发了广泛的关注和批评&#xff0c…

如何彻底搞懂装饰器(Decorator)设计模式?

对于任何一个软件系统而言&#xff0c;往现有对象中添加新功能是一种不可避免的实现场景&#xff0c;但这一实现过程对现有系统的影响可大可小。从架构设计上讲&#xff0c;我们也知道存在一个开闭原则&#xff08;Open-Closed Principle&#xff0c;OCP&#xff09;&#xff0…

中文信息期刊投稿邮箱

《中文信息》杂志是国家新闻出版总署批准的国家级刊物&#xff08;月刊&#xff09;&#xff0c;国内外公开发行&#xff0c;大十六开印刷。本刊主要反映我国中文信息处理的学术水平&#xff0c;重点刊登科技、经济、教育等领域的基础理论、科研与应用技术的学术论文&#xff0…

使用Coding部署项目

coding概述&#xff1a;提供一站式开发协作工具&#xff0c;帮助研发团队快速落地敏捷开发与 DevOps 开发方式&#xff0c;实现研发效能升级 一、创建项目 省略 详细文档&#xff1a;https://g-mnbk6665.coding.net/quickstart 二、SSH连接 关于ssh相关命令 重启SSH服务 s…

2023蓝桥杯大赛软件类省赛Java大学B组G题 买二增一 队列的简单应用

用队列 Queue package Dduo; //Bhu Bigdata 1421 //Eslipse IDE 2020-08 //JDK 1.8 //2024/5/19 import java.util.Scanner; import java.math.BigInteger; import java.util.Arrays; import java.util.LinkedList; import java.util.Queue;public class Main {public static v…

【openlayers系统学习】1.6下载要素,将要素数据序列化为 GeoJSON并下载

六、下载要素 下载要素 上传数据并编辑后&#xff0c;我们想让用户下载结果。为此&#xff0c;我们将要素数据序列化为 GeoJSON&#xff0c;并创建一个带有 download​ 属性的 <a>​ 元素&#xff0c;该属性会触发浏览器的文件保存对话框。同时&#xff0c;我们将在地图…

二叉树顺序结构及链式结构

一.二叉树的顺序结构 1.定义&#xff1a;使用数组存储数据&#xff0c;一般使用数组只适合表示完全二叉树&#xff0c;此时不会有空间的浪费 注&#xff1a;二叉树的顺序存储在逻辑上是一颗二叉树&#xff0c;但是在物理上是一个数组&#xff0c;此时需要程序员自己想清楚调整…

GPT-4o: 未来的智能助手

GPT-4o: 未来的智能助手 在这个信息爆炸的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经成为我们生活中不可或缺的一部分。作为OpenAI最新推出的语言模型&#xff0c;GPT-4o不仅继承了前几代模型的优点&#xff0c;还在多个方面进行了显著的提升。本文将带你深入了解…