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