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"

              }

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

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

相关文章

[数据集][目标检测]脑溢血检测数据集VOC+YOLO格式767张2类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):767 标注数量(xml文件个数):767 标注数量(txt文件个数):767 标注类别…

【传知代码】基于知识引导提示的因果概念提取(论文复现)

前言:在当今信息爆炸的时代,我们被海量的数据所包围,然而,这些数据中的真正价值往往隐藏在深层的因果关系之中。无论是科学研究、商业决策,还是日常生活中的选择,理解并准确把握事物之间的因果关系&#xf…

Navicat Premium 16.01 下载、安装教程

Navicat Premium 16下载与安装教程 目录 Navicat Premium 16下载与安装教程前言安装步骤同意协议选择安装目录桌面快捷方式安装正在安装安装完成 步骤下载方式 前言 数据库管理用Navicat更加方便,可视化效果更好,今天给大家带来2022 Navicat Premium 16…

【thinkphp问题栏】tp5.1重写URL,取消路径上的index.php

在Apache运行thinkphp5.1时,发现系统默认生成的.htaccess不生效。 首先先查看怎么修改伪静态 1、修改Apache的配置文件 在Apache的安装目录下,打开config/httpd.conf。 搜索rewrite.so,将前面的#删掉,表示开启URL重写功能 2、…

Java | Leetcode Java题解之第120题三角形最小路径和

题目&#xff1a; 题解&#xff1a; class Solution {public int minimumTotal(List<List<Integer>> triangle) {int n triangle.size();int[] f new int[n];f[0] triangle.get(0).get(0);for (int i 1; i < n; i) {f[i] f[i - 1] triangle.get(i).get(i…

知名专业定制线缆知名智造品牌推荐-精工电联:解决水下机器人线缆行业痛点的领航者

在科技日新月异的今天&#xff0c;精工电联作为高科技智能化产品及自动化设备专用连接线束和连接器配套服务商&#xff0c;致力于为高科技行业提供高品质、高性能的集成线缆和连接器定制服务。我们不仅是高品质定制线缆供应商&#xff0c;更是水下机器人线缆行业痛点的有效解决…

win系统游戏提示找不到d3dx9_37.dll丢失的解决方法-最简单的解决方法

d3dx9_37.dll 是一个动态链接库文件&#xff0c;属于 Microsoft DirectX 9 的一部分。DirectX 9 是一个用于多媒体应用&#xff0c;特别是游戏和视频的 API&#xff0c;它提供了一套丰富的功能&#xff0c;用于处理图形、声音和输入设备等。d3dx9_37.dll 文件包含了 Direct3D 9…

【30天精通Prometheus:一站式监控实战指南】第12天:windows_exporter从入门到实战:安装、配置详解与生产环境搭建指南,超详细

亲爱的读者们&#x1f44b;   欢迎加入【30天精通Prometheus】专栏&#xff01;&#x1f4da; 在这里&#xff0c;我们将探索Prometheus的强大功能&#xff0c;并将其应用于实际监控中。这个专栏都将为你提供宝贵的实战经验。&#x1f680;   Prometheus是云原生和DevOps的…

容器化部署gitlab、jenkins,jenkins应用示例

一、容器化部署docker和docker conpose安装 Docker&Docker-compose的安装及部署_docker 20 使用什么版本docker-compose-CSDN博客 1.docker 安装脚本 cat >01_docker.sh<<EOF #!/bin/bash yum remove docker \docker-client \docker-client-latest \docker-co…

用开源模型MusicGen制作六一儿童节专属音乐

使用的是开源模型MusicGen&#xff0c;它可以根据文字描述或者已有旋律生成高质量的音乐(32kHz)&#xff0c;其原理是通过生成Encodec token然后再解码为音频&#xff0c;模型利用EnCodec神经音频编解码器来从原始波形中学习离散音频token。EnCodec将音频信号映射到一个或多个并…

堡垒机,日志审计系统,行为管理,漏洞扫描的作用

堡垒机 日志审计 行为管理 漏洞扫描 堡垒机和防火墙的区别主要体现在以下几个方面&#xff1a; 功能不同&#xff1a;堡垒机主要用于管理和控制服务器访问权限&#xff0c;提供安全的登录通道和权限控制&#xff0c;还可以记录并监控用户对服务器的所有操作&#xff0c;为后…

两个数相加减高级实现

不使用实现两数相加 #include <stdio.h> int plus(int a, int b) {int sum0,addication0;while(b!0){sum a^b;addication (a&b)<<1;a sum;b addication;}return a; }不使用-实现两数相减 #include <stdio.h> int sub(int a, int b) {int sum0,abdc…

C++ 课堂实验 编写一个能计算银行存款的小程序。

本关任务&#xff1a;编写一个能计算银行存款的小程序。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.简单的循环语句&#xff0c;2.基本数据类型。 编程要求 10万元存银行&#xff0c;每年利息3.75%&#xff0c;每年计算一次利息&#xff0c;将本金加上…

基于Open3D的点云处理24-ICP匹配cuda加速

参考:docs/jupyter/t_pipelines/t_icp_registration.ipynb 完整测试用例: import open3d as o3d import open3d.core as o3cif o3d.__DEVICE_API__ == cuda:import open3d.cuda.pybind.t.pipelines.registration as treg else:

mac地址一样,ip不同,能ping通么?

一、mac地址一样&#xff0c;ip不通能ping通过么&#xff1f; 结论&#xff1a;两台设置的mac地址一样&#xff0c;不管是否通过交换机&#xff0c;两个设备之间都不会收到影响。 1、两个设备之间不通过交换机。 原因&#xff1a;这是因为在ping时&#xff0c;设备会发起arp…

携程梁建章:持续投资创新与AI,开启旅游行业未来增长

5月30至31日&#xff0c;携程集团在上海和张家界举办Envision 2024全球合作伙伴大会&#xff0c;邀请超50个国家和地区的1600余名外籍旅游业嘉宾与会&#xff0c;共同探讨中国跨境旅游市场发展机遇&#xff0c;讲好中国故事。 携程国际业务增速迅猛&#xff0c;创新与AI解锁未…

Unity 自定义房间布局系统 设计与实现一个灵活的房间放置系统 ——自定义房间区域功能

自定义房间区域功能 效果&#xff1a; 功能&#xff1a; 能够自定义房间的大小一键生成放置区域可控的放置网格点当物体放置到区域内可自动吸附物体是否可放置&#xff0c;放置时如果与其他物体交叉则不可放置&#xff08;纯算法计算&#xff09;管理房间内的物体&#xff0c…

云原生架构模式

本文主要介绍了云原生架构的主要设计模式&#xff0c;讨论了这些模式的优缺点及其适用场景&#xff0c;并探讨了在云计算环境中的应用和挑战。原文: Cloud-Native Architecture Patterns (Part 1)&#xff0c;Cloud-Native Architecture Patterns (Part 2) Bernard Hermant Uns…

【产品经理】总篇章

引言: 在最近频繁的产品职位面试中&#xff0c;我深刻体会到了作为产品需要的不仅仅是对市场和技术的敏锐洞察&#xff0c;更多的是在复杂多变的环境中&#xff0c;如何运用沟通、领导力和决策能力来引导产品从概念走向市场。这一系列博客将分享我多年经历和所学到的所以知识&a…

java —— 集合

一、集合的概念 集合可以看做是一个存储对象的容器&#xff0c;与数组不同的是集合可以存储不同类型的对象&#xff0c;但开发中一般不这样做。集合不能存储基本类型的对象&#xff0c;如果存储则需要将其转化为对应的包装类。 二、集合的分类 集合分为 Collection 和 Map 两…