Magento确认小部件用于显示带有指定消息的对话框,以及确认按钮(即OK)和Cancel按钮。我们可以在下面的路径中找到Magento确认小部件源文件,

<Magento安装根目录>/vendor/magento/module-ui/view/base/web/js/modal/confirm.js

我们可以使用确认小部件为Admin和storefront实现确认窗口。

初始化确认小部件:

可以使用以下两种方法初始化确认小部件,

方法1:

可以通过绑定到某个元素来初始化确认小部件。

示例HTML代码:

<a class="action delete" id="delete_image" href="<?php /* @escapeNotVerified */ echo $block->getDeleteUrl($_customer->getEntityId()); ?>">
    <span>
        <?php /* @escapeNotVerified */ echo __('Delete'); ?>
    </span>
</a>

示例JS代码:

<script>
    require([
        'jquery',
        'Magento_Ui/js/modal/confirm'
    ],
    function($, confirmation) {
        $('#delete_image').on('click', function(event){
            event.preventDefault;
            confirmation({
                title: 'Some title',
                content: 'Some content',
                actions: {
                    /**
                     * Callback always - called on all actions.
                     */
                    always: function () {},
 
                    /**
                     * Callback confirm.
                     */
                    confirm: function () {},
 
                    /**
                     * Callback cancel.
                     */
                    cancel: function () {}
                }
            });
        });
    });
</script>

在这里,确认小部件将在点击<a>标签时被初始化,并且在小部件初始化之后,modal pop-up窗口将打开。

方法2:

可以初始化确认小部件而不绑定到某个元素。

示例JS代码:

<script>
    require([
        'Magento_Ui/js/modal/confirm'
    ],
    function($, confirmation) {
        confirmation({
            title: 'Some title',
            content: 'Some content',
            actions: {
                /**
                 * Callback always - called on all actions.
                 */
                always: function () {},
 
                /**
                 * Callback confirm.
                 */
                confirm: function () {},
 
                /**
                 * Callback cancel.
                 */
                cancel: function () {}
            }
        });
    });
</script>

这里,确认小部件将在页面加载时初始化,并且在小部件初始化之后,modal pop-up窗口将打开。

确认小部件选项:

  • title:确认弹出窗口的标题。
  • content: 确认弹出窗口的内容。
  • actions: 这是确认小部件回调,它有以下三个回调事件,
    • confirm callback:单击确认按钮时将调用它。
    • cancel callback: 单击取消按钮时将调用它。
    • always callback:单击确认按钮和取消按钮时将调用它。

Magento2确认小部件还有一些其他选项,

  • autoOpen
  • clickableOverlay
  • focus

您可以在此处找到有关这些选项的详细说明

希望这可以帮助你。