百度 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'));