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