当前位置: 首页 > news >正文

amis 事件动作 和 行为按钮 常用用法

行为按钮 action 仅是对click事件的处理

actionType:这是 action 最核心的配置,来指定该 action 的作用类型,支持:ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。

Button的本质就是一个Action 行为按钮。

1. 按钮集合 actions

"actions": [  //按钮集合  有的组件中是叫"buttons": [{"label": "上传${model}","type": "button","level": "link","id": "u:f73c31f82206","api": {"method": "post","url": "/lb.wind/api/Device/upload/model/file","data": {"serial": "${serial}","file": "${name}","model": "${model}"}},"actionType": "ajax","className": "m-l-lg"}]

2.action 还可以使用 body 来渲染其他组件,让那些不支持行为的组件支持点击事件,比如下面的例子

    {"type": "action","body": {"type": "image","src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"},"tooltip": "点击会有弹框","actionType": "dialog","dialog": {"title": "弹框","body": "这是个简单的弹框。"}}

3.onClick定义点击事件,里面提供了event和props对象. props 可以拿到这个组件的其他属性,同时还能调用 amis 中的内部方法,数据在props.data中。event 就是 React 的事件。

{"label": "点击","type": "button","onClick": "props.onAction(event, {"actionType": "ajax","api": {"method": "PATCH","url": "/lb.iot/api/DeviceTree/"+m.id,"data": m,}});
"}

4.自定义组件使用Action(button)行为按钮:

onMount: (dom, data, onChange, props) => {const button = document.createElement('button');button.innerText = '点击修改姓名';button.onclick = event => {onChange('new name', 'name');props.onAction(  //详见amis/src/renderes/Action.tsxevent,{type: 'action',label: '弹个框',actionType: 'dialog',dialog: {title: '弹框',body: 'Hello World!'}},{} // 这是 data);event.preventDefault();};dom.appendChild(button);
};

事件动作onEvent属性 支持多种事件配置

通过onEvent属性实现渲染器事件与响应动作的绑定。onEvent内配置事件和动作映射关系,actions属性是事件对应的响应动作的集合.

actions中动作都是按顺序一个个执行的

事件包含渲染器事件和广播事件

• 渲染器事件,由具体的渲染器组件提供,每个渲染器组件暴露的事件可以查看amis组件文档的事件表;    比如 button按钮的click事件   select的change事件等

• 广播事件,即自定义事件,可以自定义派发的事件名称eventName(通过广播动作触发),其他渲染器可以监听该自定义事件并配置响应动作。

action动作包含通用动作、组件动作、广播动作、自定义动作,可以通过配置actionType来指定具体执行什么动作。

1.通用动作:包含发送 http 请求、跳转链接、浏览器回退、浏览器刷新、打开/关闭弹窗、打开/关闭抽屉、打开对话框、弹出 Toast 提示、复制、发送邮件、刷新、控制显示隐藏、控制启用禁用状态、设置数据.

ps: 发送请求(ajax)动作 "silent": true 或者 msg为空字符串时不会提示message(推荐设置slient,否则responseResult无法映射msg进去)。

另外动作中ajax请求比较简单无spinner加载动画和遮罩(可自行增加spinner实现遮罩 {"type": "spinner", "overlay": true, "showOn": "this.showSpinner"})

比如:setValue动作使用(组件中传递的参数是value, args: {value: {age:17} })  

{"type": "form","title": "表单","body": [{"label": "文本框","type": "input-text","name": "text","id": "u:fdd256b622e0"}],"id": "u:c123bdb1db9e","debug": true
}"onEvent": {"click": {"actions": [{"componentId": "u:c123bdb1db9e", //设置到form中
"expression": "!this.event.data.lock", //动作触发判断条件"args": {"value": "${event.data}" //此组件数据域(event.data)中数据全部传入.  },"actionType": "setValue"}],"weight": 0}}

2.组件动作:是一些组件特有动作。

比如:触发tabs组件的changeActiveKey动作,修改激活的tab值  

  {"type": "button","label": "更新","level": "primary","className": "mt-2 mb-2","onEvent": {"click": {"actions": [{"actionType": "changeActiveKey","componentId": “tabs”,"args": {"activeKey": 1}}]}}
},

3.广播动作:通过配置actionType: 'broadcast'和eventName实现触发一个广播,可以通过配置动作执行优先级weight来控制所有监听者的动作执行顺序。(event action)

//点击按钮触发 广播参数事件     

{"type": "button","id": "u:f360e41ffe34","name": "role","onEvent": {"click": {"actions": [{"actionType": "broadcast","eventName": "broadcast_1",  //广播参数"args": {"age": 18}}]}}
}

//监听广播事件 并触发form的reload或setValue动作.   

{"type": "form","name": "sub-form1","onEvent": {"broadcast_1": {"actions": [// {//   "actionType": "reload",//   "args": {//     "myname": "${event.data.age}"//   }// },{  //设置input-text组件的value值"actionType": "setValue","componentId":"u:4b27eefc1f18","args": {"value": "${event.data.age}"}},{"actionType": "toast","args": {"msgType": "info","msg": "表单1刷新完成"}}]}},"body": [{"type": "input-text","label": "昵称","name": "myname","disabled": false,"mode": "horizontal","id": "u:4b27eefc1f18"}]
}

4.自定义动作: 自定义js写动作

1.动作执行函数doAction,可以执行所有类型的动作

2.通过上下文对象context可以获取当前组件实例,例如context.props可以获取该组件相关属性

3.事件对象event,event.data 获取数据域中数据,在doAction之后执行event.stopPropagation = true;可以阻止后续动作执行

比如:      {

                "actionType": "custom",

                "script": "\n console.log(context.props, event);\n doAction({\n  actionType: 'setValue', \n  componentId: 'u:c123bdb1db9e', \n  args: {value: {age:17} } \n}); \n"

              }

相关文章:

amis 事件动作 和 行为按钮 常用用法

行为按钮 action (仅是对click事件的处理) actionType:这是 action 最核心的配置,来指定该 action 的作用类型,支持:ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。 Butt…...

4K高刷显示器 - 蚂蚁电竞ANT27VU

可以毫不夸张地说,每一局游戏最终能够取得胜利,实际上都与一套极为优秀的电竞 PC 有着紧密的关联,因为其能够提供强大的性能支持与流畅的体验。同样的道理,一套优秀的电竞 PC 若想发挥出最佳的效果,那也都离不开一台能…...

图解支付系统的渠道路由设计

大家好,我是隐墨星辰,今天和大家聊聊渠道路由设计。 这篇文章主要讲清楚:渠道路由是什么,为什么需要渠道路由,渠道路由的几种形态,一个简洁而实用的基于规则的渠道路由设计。 注:有些公司称渠…...

Leecode---347:输出前k个高频元素(使用unordered_map)

题目: 给你一个整数数组 nums 和一个整数 k ,请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 思路: 三步: 1、用map来记录每个元素出现的次数 2、按map中的值大小排序,先让其有序,再逆…...

k8s ceph(静态pvc)

1.在 Kubernetes 节点上安装ceph-common 包。这个包包含了连接到 Ceph 集群所需的工具和库。可以使用以下命令在每个节点上安装: sudo apt-get install ceph-common2.在 Kubernetes 中创建一个 Secret 对象,用于存储连接到 Ceph 集群所需的密钥和配置信息…...

Qt QScript 之 C++/JavaScript相互调用

文章目录 Qt Script什么是ECMAScriptQt 中JavaScriptclass 详解Basic UsageQObject对脚本引擎可用使用信号槽connect 三种模式访问属性, 子对象使c++对象可用于用Qt Script编写的脚本C++ 类成员函数可用于脚本C++ 类属性可用于脚本对脚本中的c++对象信号的反应函数对象和本机函…...

可能会引起空指针

PreparedStatement preparedStatement null; preparedStatement conn.prepareStatement(sql); 如果直接下面这个可能会赋值给空指针 因为要在try{}和catch{}里面都用,所以要定义在try外面为null //如果只是测试,可以PreparedStatement preparedStatement conn.prepareSta…...

Linux input输入子系统

Linux input 更多内容可以查看我的github Linux输入子系统框架 Linux输入子系统由驱动层、核心层、事件处理层三部分组成。 驱动层:输入设备的具体驱动程序,负责与具体的硬件设备进行交互,并将底层的硬件输入转化为统一的事件形式&#xff…...

dataworks调度参数

概述 调度参数是DataWorks任务调度时使用的参数,调度参数会根据任务调度的业务时间及调度参数的取值格式自动替换取值,实现在任务调度时间内参数的动态取值。 调度参数通过赋值方式分为自定义参数(推荐)和系统内置变量两大类。 …...

JavaScript第五讲:事件,条件循环语句,错误处理

前言 在编程的世界里,事件、条件和循环语句、以及错误处理是构建任何复杂程序或应用的基石。无论是开发一个简单的网页交互,还是构建一个庞大的企业级系统,这些基础概念都扮演着至关重要的角色。今天星途将通过这篇文章,分别深入…...

BrainGPT1,一个帮你b站点歌放视频的多模态多轮对话模型

BrainGPT1,一个帮你b站点歌放视频的多模态多轮对话模型 返回论文目录 项目地址 模型地址 作者:华东师范大学,计算机科学与技术学院,智能教育研究院的小怪兽会微笑。 介绍 BrainGPT1是一个工具调用多轮对话模型,与G…...

带DSP音效处理D类数字功放TAS5805M中文资料

国产替代D类数字功放中文资料访问下方链接 ACM8628 241W立体声182W单通道数字功放中文寄存器表 内置DSP多种音频处理效果ACM8628M-241W立体声或182W单通道数字功放 1 特性 具有增强处理能力和低功率损耗的 TAS5805M 23W、无电感器、数字输入、立体声、闭环 D 类音频放大器 …...

java中BigDecimal的比较

BigDecimal是Java中的一个类,位于java.math包中,它提供了任意精度的有符号十进制数字的表示,以及对这些数字进行算术运算的方法 BigDecimal的主要用途包括: 1.金融计算:金融领域对数值的精度要求非常高,使…...

张大哥笔记:你卖什么,就反着来卖

普通人打工的一生,就是努力工作,买房,买车,送孩子上好的学校,为了孩子不要输在起跑线上,拼命报各种补习班等,这些都是普通人认为的主流价值观文化,也造就了一批批的赚钱机器&#xf…...

Nginx(openresty) 开启gzip压缩功能 提高web网站传输速度

1 开启nginx gzip压缩后,网页的图片,css、js等静态资源的大小会减少,节约带宽,提高传输效率,给用户快的体验,给用户更好的体验. 2 安装 #centos 8.5 yum install gzip 3 配置 #建议统一配置在http段 vim /usr/loca…...

nn.Embedding使用

nn.Embedding使用 Embedding.weight会从标准正态分布中初始化成大小为(num_embeddings, embedding_dim)的矩阵 PE矩阵的作用就是替换这个标准正态分布 input中的标号表示从矩阵对应行获取权重来表示单词 # 1.设置embedding结构 max_seq_len 1000 # 句…...

Qt6 mathgl数学函数绘图

1. 程序环境 Qt6.5.1, mingw11.2mathgl 8.0.1: https://sourceforge.net/projects/mathgl/,推荐下载mathgl-8.0.LGPL-mingw.win64.7z,Windows环境尝试自己编译mathgl会缺失一些库,补充完整也可以自己编译,路径"D:\mathgl-8.0.LGPL-mingw.win64\bin"添加至系统环境…...

Nginx配置文件中静态资源文件禁止通过目录查看

Nginx配置文件中静态资源文件禁止通过目录查看 nginx作为文件服务器访问静态资源时,默认是可以通过目录路径查看该目录下的所有文件的,这样会被检查出漏洞,容易造成静态资源泄露。 方案 location /images {autoindex off;autoindex_exact_…...

力扣Hot100-有效的括号(栈stack)

给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相同类型的左括…...

Android下HWC以及drm_hwcomposer普法(上)

Android下HWC以及drm_hwcomposer普法(上) 引言 按摩得全套,错了,做事情得全套,普法分析也是如此。drm_hwcomposer如果对Android图形栈有一定研究的童鞋们应该知道它是Android提供的一个的图形后端合成处理HAL模块的实现。但是在分析这个之前…...

XML Group端口详解

在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...