提示小挂件 Prompt Widget

Magento 2.X
, ,
1

Magento2 提示挂件是一个弹出框，有输入栏、取消按钮和确认按钮。Magento2 原始的提示挂件是 <Magento_Ui_module_dir>/view/base/web/js/modal/prompt.js.

使用 Magento2 挂件意味着你可以在前端和后台都可以使用提示窗口。同时，在 Magento 后台模式库、滑出面板、模态框和遮罩中，可以看到弹窗的设计模式。

初始化提示挂件

有两种方法可以初始化 Magento2 提示挂件

在原始上初始化

$('#prompt_init').prompt({
    title: 'Prompt title',
    actions: {
        confirm: function(){}, //callback on 'Ok' button click
        cancel: function(){}, //callback on 'Cancel' button click
        always: function(){}
    }
});

单独初始化

require([
    'Magento_Ui/js/modal/prompt'
], function(prompt) { // Variable that represents the `prompt` function
 
    prompt({
        title: 'Some title',
        content: 'Some content',
        actions: {
            confirm: function(){},
            cancel: function(){},
            always: function(){}
        }
    });
 
});

提示挂件选项

actions

挂件的回调函数

  • 类型：Object

  • 默认值：

actions: {
    confirm: function(){},
    cancel: function(){},
    always: function(){}
}

autoOpen

在初始化挂件之后，自动弹出提示窗

  • 类型：Boolean

  • 默认值：false

clickableOverlay

当用户点击遮罩时关闭提示窗

  • 类型：Boolean

*默认值：true

content

提示窗的内容

  • 类型：String

focus

如果提示窗弹出，就会聚焦在这个元素上。以防这个选项没有指定或者是空的，默认会聚焦于关闭按钮上。如果 focus 是可选的，请把他设置为 none。

  • 类型：String

  • 默认值：‘’

title

提示窗的标题

  • 类型：String

  • 默认值：‘’

本教程翻译自Mageplaza模块开发系列，其他内容请点击下面链接: