0

我一直在寻找答案，现在想找到答案。所以这里有一个问题：我需要更新使用 editor.DomComponents.addType('myComponent') 添加的 GrapesDom 元素的类名。（在我正在使用的完整代码下方）

  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>

任何人都会知道如何做到这一点？谢谢 ：）

4

1 回答 1

1

对不起，如果有点晚了，但唯一缺少的是使用addClass方法来添加你的active类。在这里您可以看到一个工作示例

...
 handleChange (attr) {
     doSomething(attr);
     if(something()) {
       this.addClass('active')
     }

 }
...

笔记

我看到您正在使用isComponent检查属性data-gjs-type是否是您的类型的名称。您不需要那个，因为如果该属性已经设置，则该方法isComponent将不会运行并且将直接分配类型。

于 2020-05-13T05:06:14.470 回答