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

百度 amis 当成 UI 库用

                        百度 amis 当成 UI 库用

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

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

2.js中使用百度amis中 confirm

amisLib.confirm('amisLib 是否确认').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弹出输入框:
amisLib.prompt('请输入:', "默认值").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.lryc.cn/news/118090.html

相关文章:

  • 质检工具(FindBugs、CheckStyle、Junit、Jmeter、Apifox)
  • MS31803TE 国产 四通道低边驱动器 PIN对PIN替代DRV8803
  • wordpress数据表中标签和分类如何区分?
  • css3 实现文字横幅无缝滚动
  • unity 修改默认脚本
  • 【MySQL】增删查改基础
  • 【vue+el-table+el-backtop】表格结合返回顶部使用,loading局部加载
  • 设计模式(4)装饰模式
  • Redis——通用命令介绍
  • EmberJS教程_编程入门自学教程_菜鸟教程-免费教程分享
  • Diffusion扩散模型学习4——Stable Diffusion原理解析-inpaint修复图片为例
  • dns的负载分配是什么
  • adb 通过wifi连接手机
  • 将应用设置成系统App/获取Android设备SN号
  • 2.CUDA 编程手册中文版---编程模型
  • Claude 2、ChatGPT、Google Bard优劣势比较
  • Docker安装Hadoop分布式集群
  • 文盘 Rust -- tokio 绑定 cpu 实践
  • 微服务Ribbon-负载均衡策略和饥饿加载
  • uni-app 运行时报错“本应用使用HBuilderX x.x.x 或对应的cli版本编译,而手机端SDK版本是x.x.x。不匹配的版本可能造成应用异常”
  • Windows使用docker desktop 安装kafka、zookeeper集群
  • 11 | 苹果十年财报分析
  • Zookeeper与Redis 对比
  • 跨境商城服务平台搭建与开发(金融服务+税务管理)
  • docker配置文件
  • Mysql数据库之单表查询
  • macos搭建appium-iOS自动化测试环境
  • 日常工具 之 一些 / 方便好用 / 免费 / 在线 / 工具整理
  • AWS 中文入门开发教学 50- S3 - 网关终端节点 - 私有网络访问S3的捷径
  • windows使用/服务(13)戴尔电脑怎么设置通电自动开机