Как изменить элемент класса из компонента Dom в GrapesJS - PullRequest
Новая
       13

Как изменить элемент класса из компонента Dom в GrapesJS

0 голосов
/ 21 апреля 2020

Я уже немного искал ответ и хотел бы найти ответ. Итак, вот вопрос: мне нужно обновить имя класса элемента GrapesDom, который был добавлен с помощью editor.DomComponents.addType ('myComponent'). (Ниже полного кода, который я использую) 

  editor.DomComponents.addType('myComponent', {
    isComponent: function (el) {
      if (el.getAttribute && el.getAttribute('data-gjs-type') === 'myComponent') {
        return {
          type: 'myComponent'
        }
      }
    },
    model: containerModel.extend({
      defaults: {
        ...containerModel.prototype.defaults,
        tagName: 'div',
        classes: ['container'],
        traits: [
          {
            type: 'select',
            name: 'default',
            options: [
              { value: 'value_1', name: 'value 1' },
              { value: 'value_2', name: 'value 2' },
              { value: 'value_3', name: 'value 3' }
            ],
            label: 'Défault'
          }
        ],
        editable: false,
        stylable: false,
        hoverable: false,
        propagate: ['editable', 'stylable', 'hoverable', 'selectable'],
        components: {
          type: 'row',
          classes: ['row'],
          selectable: false,
          propagate: ['editable', 'stylable', 'hoverable', 'selectable'],
          components: {
            type: 'column',
            classes: ['col'],
            components: myCustomComponent
          }
        }
      },
      init () {
        this.on('change:attributes', this.handleChange);
      },
      handleChange () {
        console.log('value ', this.getAttributes()) // This is working

        // Here I would like to add a class name to an existing class of the component. Depending on the attribute, I'd like to change the position of 'active' class.

      }
    })
  })

Вот часть HTML myCustomComponent 

<nav>
  <div class="nav-1 active"> test 1 </div>
  <div class="nav-2"> test 2 </div>
</nav>

У кого-нибудь есть идея, как это сделать? Спасибо:)

...