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

 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编辑器中配置事件动作

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

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

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

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

然后点击预览可查看页面

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ollama:一个在本地部署、运行大型语言模型的工具

Ollama:一个在本地部署、运行大型语言模型的工具 Ollama部署、运行大型语言模型概述安装配置Ollama命令模型库使用示例自定义模型从GGUF导入自定义提示从PyTorch或Safetensors导入 开启服务REST API卸载Ollama One-API概述One-API管理本地模型 Open WebUI概述Docker…

RuntimeException 和 Exception区别 (比如事务管理中)

在 Spring 框架中,RuntimeException 和 Exception 的区别主要体现在异常处理和事务管理的方面。这两者都是 Java 异常处理体系的一部分,以下是它们在 Spring 中的区别: 异常处理: RuntimeException:在 Spring 中&…

IDEA打开项目报错

IDEA打开项目报错: Cannot read scheme C:\Users\xxxxxx\AppData\Roaming\JetBrains\IntelliJIdea2023.2\qaplug_profiles\Default.xmljava.lang.AbstractMethodError: Receiver class com.soldevelo.qaplug.scanner.AnalysisProfileManager$2 does not define or i…

Linux 共享内存

Linux 共享内存 1. shmget函数2. shmat函数3. shmdt函数4. shmctl函数5. 注意: 多线程共享进程的地址空间,如果多个线程需要访问同一块内存,用全局变量就可以了。 在多进程中,每个进程的地址空间是独立的,不共享的&am…

【Linux学习】深入了解Linux中进程状态及其转换

文章目录 进程状态进程排队进程的状态(运行,阻塞,挂起)进程的七个状态 孤儿进程 进程状态 进程 task_struct 可执行程序 进程不是一 直在运行的,可能在等待软硬件资源,比如scanf后,程序停止运…

Leetcode刷题笔记4

1658. 将 x 减到 0 的最小操作数 1658. 将 x 减到 0 的最小操作数 - 力扣(LeetCode) 示例 3: 输入:nums [3,2,20,1,1,3], x 10 输出:5 解释:最佳解决方案是移除后三个元素和前两个元素(总共…

无人机测绘遥感技术及应用详解

一、技术原理与特点 无人机测绘遥感技术是基于无人机平台搭载各类遥感传感器,通过遥控或自主飞行的方式,快速获取地面目标信息的一种先进技术手段。该技术具有灵活高效、高分辨率、实时性强等特点,广泛应用于国土资源调查、环境监测、城市规…

OpenH264 编解码器介绍

思科 思科系统(英语:Cisco Systems, Inc.)是一间跨国际综合技术企业,总部设于加州硅谷;思科开发、制作和售卖网络硬件、软件、通信设备等高科技产品及服务,并透过子公司(例子有OpenDNS、Webex、…

ICode国际青少年编程竞赛- Python-6级训练场-递归入门

ICode国际青少年编程竞赛- Python-6级训练场-递归入门 1、 def recur(n):# 边界条件if n<1:return# 额外动作Dev.step(n)Dev.turnRight()# 递归调用recur(n-1)recur(8)2、 def recur(n):# 边界条件if n<1:return# 额外动作Dev.step(n)Dev.turnLeft()# 递归调用recur(n-1)…

小红书无限加群脚本无需ROOT【使用简单无教程】

小红书无限加群脚本无需ROOT&#xff0c;包含了对应的小红书版本【使用简单无教程】 链接&#xff1a;https://pan.baidu.com/s/1HkLhahmHDFMKvqCC3Q3haA?pwd6hzf 提取码&#xff1a;6hzf

数据结构_链式二叉树(Chained binary tree)基础

✨✨所属专栏&#xff1a;数据结构✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 二叉树的遍历 前序、中序以及后序遍历 学习二叉树结构&#xff0c;最简单的方式就是遍历。所谓二叉树遍历(Traversal)是按照某种特定的规则&#xff0c;依次对二叉树中的结点进行相应的操作&#xff…

【C语言】求第n个斐波那契数

问题与前言 输入n&#xff0c;输出第n个斐波那契数 例如&#xff1a; 输入&#xff1a;5 输出&#xff1a;5 输入&#xff1a;10&#xff0c; 输出&#xff1a;55 输入&#xff1a;2&#xff0c; 输出&#xff1a;1 斐波那契数列&#xff08;Fibonacci sequence&#xf…

二叉树OJ题目

一.二叉树第k层结点个数 有这样的一个思路&#xff1a;我既然要求第k层的结点个数&#xff0c;我肯定是要用到递归&#xff0c;那么当我在递归到第k层的时候我就开始判断&#xff0c;这一层是不是我所需要的那一层&#xff0c;如果是&#xff0c;就计数有几个节点&#xff0c;…

从零开始写 Docker(十五)---实现 mydocker run -e 支持环境变量传递

本文为从零开始写 Docker 系列第十五篇&#xff0c;实现 mydocker run -e, 支持在启动容器时指定环境变量&#xff0c;让容器内运行的程序可以使用外部传递的环境变量。 完整代码见&#xff1a;https://github.com/lixd/mydocker 欢迎 Star 推荐阅读以下文章对 docker 基本实现…

【开发 | 环境配置】解决 VSCode 编写 eBPF 程序找不到头文件

问题描述&#xff1a; 在使用 vscode 编写 eBPF 程序时&#xff0c;如果不做一些头文件定位的操作&#xff0c;默认情况下头文件总是带有“红色下划线”&#xff0c;并且大部分的变量不会有提示与补全。 在编写代码文件较小时&#xff08;或者功能需求小时&#xff09;并不会…

42-2 应急响应之计划任务排查

一、进程排查 进程排查是指通过分析系统中正在运行的进程,以识别和处理恶意程序或异常行为。在Windows和Linux系统中,进程是操作系统的基本单位,因此对于发现和处理恶意软件或异常活动至关重要。恶意程序通常会以进程的形式在系统中运行,执行各种恶意操作,比如窃取信息、破…

CSAPP(datalab)解析

howManyBits /* howManyBits - 返回用二进制补码表示x所需的最小位数* 示例: howManyBits(12) 5* howManyBits(298) 10* howManyBits(-5) 4* howManyBits(0) 1* howManyBits(-1) 1* howManyBits(0x80000000) …

零部件销售|基于SSM+vue的轻型卡车零部件销售平台系统的设计与实现(源码+数据库+文档)

轻型卡车零部件销售平台 目录 基于SSM&#xff0b;vue的轻型卡车零部件销售平台系统的设计与实现 一、前言 二、系统设计 三、系统功能设计 1 系统功能模块 2 管理员功能模块 3 用户后台功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题…

Leetcode—2769. 找出最大的可达成数字【简单】

2024每日刷题&#xff08;139&#xff09; Leetcode—2769. 找出最大的可达成数字 实现代码 class Solution { public:int theMaximumAchievableX(int num, int t) {return num t * 2;} };运行结果 之后我会持续更新&#xff0c;如果喜欢我的文章&#xff0c;请记得一键三连…

Unity Assembly Definition Dotween 引用

原理&#xff1a; 具体Unity程序集原理用法&#xff0c;暂时留坑&#xff0c;不介绍了&#xff0c;相信有很多人也写过了 这里简单放个官方API链接 https://docs.unity3d.com/cn/current/Manual/ScriptCompilationAssemblyDefinitionFiles.html 现象 &#xff1a;Dotween引用…