百度 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 toast
dialog: {
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'));