Magento 2.1 Ui Поле компонента компонента Вход токена

16

Я хочу добавить теги в поле ввода, аналогично тому, как это делается в форме продукта для добавления категорий - что показано на рисунке ниже. введите описание изображения здесь

Это большая задача, которую я достиг, добавив компонент поля в форму пользовательского интерфейса

<field name="parent">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Tags</item>
                <item name="componentType" xsi:type="string">field</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
                <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                <item name="dataScope" xsi:type="string">data.parent</item>
                <item name="filterOptions" xsi:type="boolean">true</item>
                <item name="showCheckbox" xsi:type="boolean">false</item>
                <item name="disableLabel" xsi:type="boolean">true</item>
                <item name="multiple" xsi:type="boolean">true</item>
                <item name="levelsVisibility" xsi:type="number">1</item>
                <item name="sortOrder" xsi:type="number">20</item>
                <item name="required" xsi:type="boolean">true</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
                <item name="listens" xsi:type="array">
                    <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
                </item>
            </item>
        </argument>
    </field>

Но это не соответствует моему требованию. Мне не нужны выпадающий список и параметры - я просто хотел добавить теги в поле ввода, такие как Tag1, Tag2, Tag 3 ... Может ли какой-нибудь один совет, где мы могли бы внести возможные изменения для достижения этой задачи.

Верду
источник

Ответы:

1

Быстрый ответ - да , все возможно с компонентами пользовательского интерфейса, потому что он действительно гибкий, как его введение.

В противном случае, я не думаю, что зависимость / переопределение элемента UI по умолчанию (как вы упомянули в посте ui-select) - это хорошая идея. Итак, в этом уроке я создам новый элемент интерфейса для тегов. Его можно использовать не только в форме продукта, но и в форме страницы cms или в зависимости от формы пользовательского интерфейса.

Теперь начнем веселье!

Во-первых, ваша форма ui_component должна выглядеть так

StackOverflow / Каталог / просмотра / adminhtml / ui_component / product_form.xml

<field name="parent">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Tags</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="component" xsi:type="string">StackOverflow_Catalog/js/form/element/tags</item>
            <item name="elementTmpl" xsi:type="string">StackOverflow_Catalog/form/element/tags</item>
            <item name="dataScope" xsi:type="string">data.parent</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">false</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
            </item>
        </item>
    </argument>
</field>

Обратите внимание на formElement , component и elementTmpl . Это должно быть обычное поле ввода.

Теперь нам нужно создать средство визуализации представления для этого элемента пользовательского интерфейса.

StackOverflow / Каталог / просмотр / основание / веб / JS / форма / элемент / tags.js

/**
 * StackOverflow Catalog.
 *
 * @category  Mage
 *
 * @author    Toan Nguyen <me@nntoan.com>
 * @copyright 2018 Toan Nguyen (https://nntoan.com)
 */
define([
    'underscore',
    'mageUtils',
    'Magento_Ui/js/form/element/abstract',
    'ko',
    'Magento_Ui/js/lib/validation/validator'
], function (_, utils, Element, ko, validator) {
    'use strict';

    return Element.extend({
        defaults: {
            list: ([]),
            valueUpdate: 'afterkeydown',
            listens: {
                'valueArea': 'onUpdateArea'
            }
        },

        initialize: function () {
            this._super();
            this.on('value', this.onUpdateArea.bind(this));
            var self = this;
            var list = this.value().split(',');
            _.each(list, function (value, index) {
                if (value.length > 0) {
                    self.list.push(value.trim());
                }
            });

            return this;
        },

        initObservable: function () {
            this._super();
            this.observe(['valueArea']);
            this.observe('list', this.list);
            return this;
        },

        onUpdateArea: function (value) {
            if (value.length > 1) {
                if (value.indexOf(',') !== -1 || value.indexOf(' ') !== -1) {
                    var newValue = value.slice(0, -1);
                    this.correctValue(newValue);
                }
            }
        },

        correctValue: function (tag) {
            if (this.hasTag(tag)) {
                this.valueArea('');
                return false;
            }
            if (this.isValidTag(tag).passed) {
                this.list.push(tag);
                this.joinList(this.list());
                this.valueArea('');
                return true;
            }

            return false;
        },

        isValidTag: function (tag) {
            return validator('validate-alphanum', tag);
        },

        OnBlurEvent: function (object) {
            if (this.valueArea() && this.valueArea().length > 0) {
                if (!this.correctValue(this.valueArea())) {
                    this.valueArea('');
                }
            }
        },

        deleteTag: function (self, value, event) {
            event ? event.stopPropagation() : false;
            var key = -1;
            _.each(this.list(), function (element, index) {
                if (value === element) {
                    key = index;
                }
            });
            if (key > -1) {
                this.list.splice(key, 1);
                this.joinList(this.list());
                this.valueArea('');
            }
        },

        joinList: function (array) {
            this.value(array.join(','));
        },

        hasTag: function (value) {
            return this.list().indexOf(value) !== -1;
        }
    });
});

шаблон нокаута уже в пути ...

StackOverflow / Каталог / вид / базовый / веб / шаблон / форма / элемент / tags.html

<div class="tags">
    <div class="admin__control-text">
        <div class="apps-share-chips-editor">
            <input class="admin__control-text" type="hidden"
                   data-bind="
        value: value,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
    }"/>
            <span data-bind="foreach: { data: list, as: 'item' }">
                <span class="field-tag-chip">
                <div class="field-tag-content" data-bind="text: item"></div>
                <div class="field-tag-close-before">
                    <span class="field-tag-close" data-bind="event: {click: $parent.deleteTag.bind($parent, $index)}"></span>
                </div>
                </span>
            </span>
            <textarea
                    class="field-tag-input" placeholder="Add more tags..." data-bind="
        event: {change: userChanges, blur: OnBlurEvent},
        hasFocus: focused,
        valueUpdate: valueUpdate,
        value: valueArea
        "></textarea>
        </div>
    </div>
</div>

Может быть, какой-то стиль? ...

StackOverflow / Каталог / вид / базовый / веб / CSS / tags.css

.field-tag-content {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.field-tag-chip {
    background: #e0e0e0;
    border: 1px solid #e0e0e0;
    display: inline-block;
    -webkit-border-radius: 3px;
    color: #444;
    margin: 4px 1px 0 2px;
    outline: none;
    vertical-align: middle;
    cursor: default;
    padding: 0;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    overflow: hidden;
    padding:5px;
    padding-right:25px;
}

.field-tag-input {
    display: inline-block;
    margin: 10px 4px 0 4px;
    vertical-align: middle;
    background: none;
    border: 0;
    height: 25px;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 0 5px;
    position: relative;
    resize: none;
    width:50%;
}
.field-tag-close-before {
    position:relative;
}
.field-tag-close{
    position: absolute;
    top: -10px;
    right: -5px;
    cursor: pointer;
}

.field-tag-close:before,
.field-tag-close:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 4px;
    background: #303030;
}

.field-tag-close:before {
    webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.field-tag-close:after {
    webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Зачем все ставить в view/base? У меня нет четкого ответа на это, но мне кажется, что это правильно, потому что команда Magento также помещает все свои элементы пользовательского интерфейса в view/base? :)

И, наконец, вам нужно будет добавить свои tags.cssк view/adminhtml/layout/catalog_product_edit.xmlи view/adminhtml/layout/catalog_product_new.xml.

Так что это все! Теперь ваш вклад должен выглядеть так:

UI-элемент-теги

Приветствия.

Тоан Нгуен
источник