当前位置: 首页 > 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"

              }

http://www.lryc.cn/news/360006.html

相关文章:

  • 4K高刷显示器 - 蚂蚁电竞ANT27VU
  • 图解支付系统的渠道路由设计
  • Leecode---347:输出前k个高频元素(使用unordered_map)
  • k8s ceph(静态pvc)
  • Qt QScript 之 C++/JavaScript相互调用
  • 可能会引起空指针
  • Linux input输入子系统
  • dataworks调度参数
  • JavaScript第五讲:事件,条件循环语句,错误处理
  • BrainGPT1,一个帮你b站点歌放视频的多模态多轮对话模型
  • 带DSP音效处理D类数字功放TAS5805M中文资料
  • java中BigDecimal的比较
  • 张大哥笔记:你卖什么,就反着来卖
  • Nginx(openresty) 开启gzip压缩功能 提高web网站传输速度
  • nn.Embedding使用
  • Qt6 mathgl数学函数绘图
  • Nginx配置文件中静态资源文件禁止通过目录查看
  • 力扣Hot100-有效的括号(栈stack)
  • Android下HWC以及drm_hwcomposer普法(上)
  • OpenCV学习 基础图像操作(十七):泛洪与分水岭算法
  • Docker基础命令(三)
  • Python的第三方库OS库
  • 两个数相加减高级实现
  • 小白跟做江科大32单片机之对射式红外传感器计次
  • 安装Kubernetes v3 ----以docker的方式部署
  • 新游启航 失落的方舟台服注册指南 一文教会你方舟台服注册
  • 运维开发详解
  • 英伟达(NVIDIA)H100性能及应用场景
  • 充电宝怎么选?充电宝目前什么牌子质量好耐用?盘点好用充电宝
  • 智能视频监控技术为游泳馆安全护航,助力安全管理新升级