Magento2如何创建确认小部件(Widgets)

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

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

希望这可以帮助你。