百度 amis 当成 UI 库用

                        百度 amis 当成 UI 库用

1.获取到这些 amis 对外提供的方法

  var  amisLib = amisRequire('amis');// 获取到这些 amis 对外提供的方法。

2.js中使用百度amis中 confirm

var name="name";amisLib.confirm('请确认删除 '+name+' !',"删除").then((confirmed) => {if (confirmed) {// 用户确认后执行的操作console.log('用户确认了');alert('用户确认了');} else {alert('用户取消了');// 用户取消了console.log('用户取消了');}});

3.百度amis中 alert

amisLib.toast.success('操作成功!');
amisLib.toast.error('发生错误!');
amisLib.toast.info('提示信息!');
4.弹出警告提示:
amisLib.alert('警告:发生问题!');
5弹出输入框:

var name="name";
amisLib.prompt('请输入:', name,"修改菜单名称").then((promptData) => {if (promptData) {alert(promptData.text);console.log(promptData.text);} else {alert('无数据');}
});

6. 百度amis中刷新页面实现自动弹窗

使用自定义组件custom

					{name: 'nav3d',id: "nav3d",type: 'custom',inline:false, //默认使用 div 标签,如果 true 就使用 span 标签onMount: (dom, value, onChange,props) => {props.onAction(event,{type: 'action',label: '弹个框',actionType: 'dialog',//dialog  toastdialog: {title: '提示: ',body: 'ros节点创建失败!'}},{} // 这是 data);return;}}

7.js中使用amis中的json生成页面

    const schema = {type: 'page',title: 'Layout Example',body: [{type: 'tabs',tabs: [{title: 'Tab 1',body: 'This is the content of Tab 1.',},{title: 'Tab 2',body: 'This is the content of Tab 2.',},],},],};react_dom.render( amisLib.render(schema), document.getElementById('content'));

8.js中使用amis中的json生成页面, 删除第二个 Tab(索引为 1)

    const schema = {type: 'page',title: 'Layout Example',body: [{type: 'tabs',tabs: [{title: 'Tab 1',body: 'This is the content of Tab 1.',},{title: 'Tab 2',body: 'This is the content of Tab 2.',},],},],};   schema.body[0].tabs.splice(1, 1); // 删除第二个 Tab(索引为 1)react_dom.render(amisLib.render(schema), document.getElementById('content'));

草稿:

    const schema1 = {"type": "page","body": [{"type": "button","label": "尝试点击、鼠标移入/移出","level": "primary","onEvent": {"init": {"actions": [{"actionType": "toast","args": {"msgType": "info","msg": "init"}}]},"inited": {"actions": [{"actionType": "toast","args": {"msgType": "info","msg": "${event.data.responseData|json}"}}]},"init": {"actions": [{"actionType": "dialog","dialog": {"title": '提示',"body": '这是一个弹框示例133333'}}]},"click": {"actions": [{"actionType": "dialog","dialog": {"title": '提示',"body": '这是一个弹框示例11111'}}]},"mouseenter": {"actions": [{"actionType": "dialog","dialog": {"title": '提示',"body": '这是一个弹框示例222'}}]},"mouseleave": {"actions": [{"actionType": "dialog","dialog": {"title": '提示',"body": '这是一个弹框示例1333'}}]}}}]};react_dom.render( amisLib.render(schema1), document.getElementById('content'));

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

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

相关文章

如何进行游戏平台搭建?

游戏平台搭建涉及多个步骤和技术,下面是一个大致的指南: 市场调研和定位:首先,要了解游戏市场和受众的需求,选择适合的游戏类型和定位。 选择平台类型:决定是要搭建网页平台、移动应用平台还是其他类型的…

群晖6.X便捷的安装cpolar内网穿透

群晖6.X便捷的安装cpolar内网穿透 文章目录 群晖6.X便捷的安装cpolar内网穿透前言1. 下载cpolar的群晖套件1.1 打开群晖套件中心1.2 选择“手动安装”1.3 选择下载cpolar套件位置 2. 打开cpolar的Web-UI界面3. 注册会员 前言 随着硬件设备和软件技术的发展,以及数据…

概率图模型(Probabilistic Graphical Model,PGM)

概率图模型(Probabilistic Graphical Model,PGM),是一种用图结构来描述多元随机变量之间条件独立性的概率模型。它可以用来表示复杂的概率分布,进行有效的推理和学习,以及解决各种实际问题,如图…

Redis小例子

MAC电脑下Redis的安装: brew install redis下面给一个Java操作redis的小例子 import redis.clients.jedis.Jedis;public class Demo {public static void main(String[] args) {// 创建 Jedis 客户端实例,连接到本地 Redis 服务器,默认端口…

RedisDesktopManage

RDM 简介下载安装 简介 RedisDesktopManager(RDM)是一个开源的跨平台图形界面工具,用于管理和操作 Redis 数据库。它提供了一个用户友好的界面,使用户能够轻松地连接、浏览、查询和修改 Redis 数据,而无需使用命令行界…

教你10分钟内学习如何CSS 设置网页打印时的样式

本文将教您开始为要打印的页面编写CSS所需要的一切提供帮助。 media 规则 If you’ve done any responsive design, you’ll already know about the media rule. As well as different screen sizes, media also lets you target “print” media. Here’s an example: 如果…

竞赛项目 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

【Java】一只小菜坤的编程题之旅【3】

文章目录 1丶判定是否互为字符重排2、杨辉三角3丶某公司的1个面试题(字符串包含问题) 1丶判定是否互为字符重排 这个题我们用一个非常简单的思想就能实现,我们先将字符串转换为字符数组,然后对字符数组进行排序,然后再…

el-radio单选框,取消选中

1.背景&#xff1a;在公司开发需求中有一个选择颜色的单选框&#xff08;黑色&#xff0c;白色&#xff09;&#xff0c;每种颜色选择后均支持取消选中&#xff0c;可是el-radio标签不支持取消选中。 2.解决&#xff1a; 方法1: <el-radio-group v-model"radioColo…

【Apollo】自动驾驶的平台背景,平台介绍

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

spring boot 集成 jetcache【基础篇:@Cached、@CreateCache、@CacheRefresh】

手打不易&#xff0c;如果转摘&#xff0c;请注明出处&#xff01; 注明原文&#xff1a;https://zhangxiaofan.blog.csdn.net/article/details/129832925 目录 前言 版本 配置通用说明 项目结构 代码 启动类 实体类 基础使用——增删改查&#xff08;Cached、CacheInv…

opencv实战项目 手势识别-手势控制键盘

手势识别是一种人机交互技术&#xff0c;通过识别人的手势动作&#xff0c;从而实现对计算机、智能手机、智能电视等设备的操作和控制。 1. opencv实现手部追踪&#xff08;定位手部关键点&#xff09; 2.opencv实战项目 实现手势跟踪并返回位置信息&#xff08;封装调用&am…

虚拟机安装 Ubuntu桌面版,宿主机无法访问虚拟机 ufw 防火墙简单使用

虚拟机安装 Ubuntu桌面版&#xff0c;宿主机无法访问虚拟机 问题处理安装ssh服务ufw防火墙 放行ssh服务ufw 常用命令 问题 本次安装使用的 ubuntu-22.04.2-desktop-amd64 &#xff0c;网络连接使用的是桥接&#xff0c;查看ubuntu的ip是正常的&#xff0c;与宿主机在同一个网段…

力扣的板子

板子 线性筛法求质因子的板子快速幂 线性筛法求质因子的板子 int limit 100000; //修改为题目中的数字的上限 bool isprime[100005] {0}; //保存所有1~limit中的数字是不是质数 int myprime[100005] {0}; //保存2~limit中所有数字的最小质因子 int primes[100000] {0}; …

airflow是什么

Airflow 简介 Airflow是一个基于有向无环图(DAG)的可编程、调度和监控的工作流平台&#xff0c;它可以定义一组有依赖的任务&#xff0c;按照依赖依次执行。airflow提供了丰富的命令行工具用于系统管控&#xff0c;而其web管理界面同样也可以方便的管控调度任务&#xff0c;并…

Lua 闭包

一、Lua 中的函数 Lua 中的函数是第一类值。意味着和其他的常见类型的值&#xff08;例如数值和字符串&#xff09;具有同等权限。 举个例子&#xff0c;函数也可以像其他类型一样存储起来&#xff0c;然后调用 -- 将 a.p 指向 print 函数 a { p print } -- 使用 a.p 函数…

(原创)Flutter与Native页面互相跳转

前言 实际开发混合项目时&#xff0c;常常会有页面跳转的需求 如果是原生界面和flutter界面需要互相跳转 这种情况应该怎么处理呢&#xff1f; 今天这篇博客主要就来介绍下这个情况 其实想一下&#xff0c;这个问题可以拆成四个小的问题来分析&#xff1a; 1&#xff1a;原生界…

什么是全局代理,手机怎么设置全局代理

目录 什么是全局代理 全局代理的优缺点 优点 缺点 手机怎么设置全局代理 注意事项 总结 在计算机网络和信息安全中&#xff0c;全局代理是一种常用的技术手段&#xff0c;用于将网络流量通过代理服务器进行转发和处理。本文将介绍什么是全局代理&#xff0c;探讨全局代理…

pyspark笔记 pyspark.sql.functions

col qqpyspark 笔记 pyspark.sql.function col VS select_UQI-LIUWJ的博客-CSDN博客 取某一列 lit 创建一个包含指定值的列 date_trunc 将日期截取成由第一个参数指定的字符串值 year, yyyy, yy——截取到年month,mon,mm——截取到月day,dd ——截取到天microsecondmillis…

SpringBoot WebSocket配合react 使用消息通信

引入websocket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>配置websocket import org.springframework.context.annotation.Bean; import org.spr…