prompt组件简介

prompt组件一共有三种弹出框:

1. showToast（）
2. showDialog（）
3. showActionMenu（）
   

一.显示一个Toast

showToast函数内参数说明如下:

message：提示文本，必填项。
duration：Toast 显示时间，单位毫秒，范围 [1500, 10000]，默认1500。
bottom：设置 Toast 的显示位置距离底部的间距。

代码实例:

Button("显示一个toast").onClick(() => {promptAction.showToast({message: '案例一',duration: 2000,bottom:100});})

二.显示一个Dialog

普通Dialog

showDialog函数内参数说明如下:

title：对话框的标题。
message：对话框的内容。
buttons：对话框上的按钮，至少配置一个，最多三个

代码实例:

Button("显示一个toast").fontSize(20).onClick(() => {promptAction.showDialog({title: "标题",message: "内容",buttons: [{text: "按钮一",color: "#888888"},{text: "按钮二",color: "#999999"},{text: "按钮三",color: "#888888"}]}, (error, index) => {console.log("当前点击按钮的索引值:"+index.index);var msg = error ? JSON.stringify(error) : "index: " + index.index;promptAction.showToast({message: msg})});})

运行结果:

对话框AlertDialog

AlertDialog类下 show函数内参数说明如下:

title：设置对话框的标题。
message：设置对话框显示的内容。
autoCancel：点击蒙层是否隐藏对话框。
cancel：点击蒙层的事件回调。
alignment：对话框的对齐方式。
offset：对话框相对于 alignment 的偏移量。
gridCount：对话框宽度所占用栅格数。

confirm 参数的配置说明如下：

value：设置按钮的显示文本。
fontColor：设置按钮的显示文本的颜色。
backgroundColor：设置按钮的背景色。
action：点击按钮的事件回调。

代码实例:

//全局声明declare interface AlertDialogParam {title?: ResourceStr;message: ResourceStr;autoCancel?: boolean;cancel?: () => void;alignment?: DialogAlignment;offset?: Offset;gridCount?: number;
}
declare interface AlertDialogParamWithConfirm extends AlertDialogParam {confirm?: {value: ResourceStr;              // 按钮显示文字fontColor?: ResourceColor;       // 按钮文字颜色backgroundColor?: ResourceColor; // 按钮背景色action: () => void;              // 点击按钮的事件回调};
}
declare interface AlertDialogParamWithButtons extends AlertDialogParam {primaryButton: {value: ResourceStr;fontColor?: ResourceColor;backgroundColor?: ResourceColor;action: () => void;};secondaryButton: {value: ResourceStr;fontColor?: ResourceColor;backgroundColor?: ResourceColor;action: () => void;};
}
declare class AlertDialog {// 显示一个对话框static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons);
}

Button("显示一个alert弹出框").margin({top:10}).fontSize(20).onClick(() => {AlertDialog.show({title: "对话框标题",message: "对话框内容",autoCancel: true,cancel: () => {promptAction.showToast({message: "点击蒙层消失"})},alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -20},primaryButton: {value: "确定",fontColor: "#ffffff",backgroundColor: "#007dfe",action: () => {promptAction.showToast({message: "我点击了缺点"})}},secondaryButton: {value: "取消",fontColor: "#ffffff",backgroundColor: "#007dfe",action: () => {promptAction.showToast({message: "我点击了取消"})}}});})

运行结果:

三.显示一个Menu(菜单)

showActionMenu函数内参数说明如下:

title： Menu 的显示标题。
buttons： Menu 显示的按钮数组，至少 1 个按钮，至多 6 个按钮。
代码实例:

Button("显示菜单").fontSize(20).onClick(() => {promptAction.showActionMenu({   // 显示一个菜单栏title: "ActionMenu标题", // 设置标题buttons: [              // 设置选项{text: "按钮1",color: "#aabbcc"},{text: "按钮2",color: "#bbccaa"},{text: "按钮3",color: "#ccaabb"}]}, (error, index) => {    // 事件回调console.log("当前点击按钮的索引值:"+index.index);var msg = error ? JSON.stringify(error) : "index: " + index.index;promptAction.showToast({message: msg})})})

运行结果:

特别注意:

1. prompt组件不能单独使用，需要放在函数内
   错误写法:
   

正确写法:

2. 引用时改为import prompt from ‘@ohos.promptAction’(官方推荐)
   

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教