README

1. 描述

此组件的主要目标是提供一种自动“点击并复制”文本到某些输入框的方法。

1. 结构

作为自定义 UI 组件，它可以在任何位置声明，其主要功能由一个 .js 文件定义

• Schatzmann_Base/view/frontend/web/js/view/copy-to-clipboard.js

以及一个模板文件，该文件将在组件被调用时渲染

• Schatzmann_Base/view/frontend/web/template/view/copy-to-clipboard.html

1. 示例

    <form id="my-form">
        <fieldset class="fieldset">
            ...
                <div class="field field-custom">
                    <input type="text" id="my-custom-input" readonly="readonly" value="my-custom-value"/>
                    <div data-bind="scope: 'copy-to-clipboard'">
                        <!-- ko template: getTemplate() --><!-- /ko -->
                    </div>
                    <script type="text/x-magento-init">
                        {
                            "*": {
                                "Magento_Ui/js/core/app": {
                                    "components": {
                                        "copy-to-clipboard": {
                                            "component": "Schatzmann_Base/js/view/copy-to-clipboard",
                                            "target": "#my-custom-input"
                                            "placeholderText": "<?= $escaper->escapeHtml(__('My Custom Placeholder')) ?>"
                                        }
                                    }
                                }
                            }
                        }
                    </script>
                </div>
            ...
        </fieldset>
    </form>

1. 备注

• 在声明组件时，需要“target”参数。此参数将是将被复制的输入框的 id 或 class。

• 当声明多个具有此功能的输入框时，始终调用单独的组件以确保它们不会冲突。

• 此组件接受的两个参数是 target 和 placeholderText。