Usar rasgo para modificar la clase de componentes

Question

¡Hola!

Estoy intentando cambiar el valor de las clases con muy poco éxito.

Aquí está la función 'onValueChange' de mi rasgo personalizado: '''JavaScript onValueChange() {
var traitModel = this.model; var selectedComponent = this.target; var inputValue = traitModel.get('value');
this.target.set('content', this.model.get('value')); selectedComponent.set('attributes', {class: inputValue}); }


Lo que da como resultado una salida HTML de:

'''HTML
<input class="input txt-red" class="col-lg-6"/>

Obviamente, esto no es HTML legal. También produce resultados extraños al añadir o eliminar una clase en la entrada de Clases.

¿Cuál es la forma correcta de hacerlo?

FrikkieSnyman · Accepted Answer

@artf ¿Esto es siquiera posible?

FrikkieSnyman · Answer

Así que lo he solucionado, de una forma bastante improvisada, ¡pero funciona!

Solo tienes que crear un rasgo personalizado y usar lo siguiente para el onValueChange()

'''JavaScript onValueChange() { var parentModel = this.target.collection.parent.sm; var component = this.target; const sm = parentModel.get('SelectorManager'); var traitModel = this.model; var selectedComponent = this.target; var label = traitModel.get('value'); var compCls = component.get('classes'); compCls.forEach(element => { if (element.id == this.model._previousAttributes.value) { compCls.remove(element); } }); si (etiqueta) { var classModel = sm.add({label}); compCls.add(ModelClase); parentModel.trigger('targetClassAdded'); } }

lock[bot] · Answer

Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.

Usar rasgo para modificar la clase de componentes

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

[BUG] El modelo no puede cambiar después de cambiar el valor en el menú desplegable Seleccionar personalizado.

Cuando la vista del componente modifica el HTML, los componentes de texto ya no son editables

[PREGUNTAS] ¿El nuevo tipo de rasgo no funciona con los componentes renderizados?

Cómo usar variables/funciones fuera del script

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins