markdown Magento 2 - 自定义UI组件模板

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown Magento 2 - 自定义UI组件模板相关的知识，希望对你有一定的参考价值。

# Custom UI Component

## Create the [handle].xml layout configuration file

Example - layout/**default.xml**

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="test.ui.component" template="Module_Name::block.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="test-ui-component" xsi:type="array">
                                <item name="component" xsi:type="string">Module_Name/js/view/component-name</item>
                                <item name="config" xsi:type="array">
                                    <item name="template" xsi:type="string">Module_Name/template-name</item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>
```

## Create new [block-name].phtml template file

Example - templates/**block.phtml** :
```html
<div id="test-ui-component" data-bind="scope:'test-ui-component'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
    {
        "#test-ui-component": {
            "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout();?>
        }
    }
</script>
```

## Create new [component-name].js JavaScript file

Example - web/js/view/**component-name.js** :
```js
define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            content: 'Welcome',
            buttonText: 'Thanks!'
        },
        initialize: function () {
            this._super();
            // Custom code
        },
        isActive: function () {
            return true;
        },
        sayGoodbye: function () {
            alert('Goodbye!!!');
        }
    });
});
```

## Create new [template-name].html component template file

Example - web/template/**template-name.html** :
```html
 <!-- ko if: isActive() -->
    <span data-bind="html: content"></span>
    <!-- ko i18n: 'friend' --><!-- /ko -->
 
    <!-- ko foreach: getRegion('extra') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
 
    <button type="button" data-bind="i18n: buttonText, attr: {title: buttonText}, click: sayGoodbye" class="button action primary"></button>
<!--/ko-->
```

以上是关于markdown Magento 2 - 自定义UI组件模板的主要内容，如果未能解决你的问题，请参考以下文章

markdown Magento 2 - 自定义UI组件模板

markdown Fishpig / Magento内的自定义字段

Magento 2：在 head 标签之后添加自定义脚本

Magento 2 如何根据语言环境自定义货币符号和格式

添加具有订单详细信息功能的自定义按钮 - Magento 2

Magento 2：自定义属性不起作用