Ocultar/mostrar rasgos y cambiar sus valores dinámicamente
Has llamado al rasgo 'nombre: 'select-type', pero estás escuchando 'change:selectType', así que arréglalo cambiando el oyente en 'change:select-type'No te fíes del valor de rasgo 'this.getTrait('select-type').props().value' sino del propio componente 'this.get('select-type')' Actualmente no puedes actualizar atributos...
Lee la respuesta completa abajo ↓Pregunta
He ampliado el componente de enlace y añadido nuevos rasgos como href. Para mostrar o ocultar el rasgo, seguí este #https://github.com/artf/grapesjs/issues/1460. Pero, ¿cómo mostrar esos rasgos de ocultación de nuevo basándose en otro cambio de valor de rasgo? Ahora mismo lo que he hecho es
'Editor. DomComponents.addType('link', {
model: dModel.extend({
defaults: Object.assign({}, dModel.prototype.defaults, {
Rasgos: [
{
Nombre: 'Nombre-Camino',
Tipo: 'texto',
etiqueta: 'Texto para mostrar',
cambioProp: 1,
},
{
tipo: 'set-path', // Tipo del rasgo
etiqueta: 'Href', // La etiqueta que verás en Configuración
nombre: 'path', // El nombre del atributo/propiedad a usar en el componente
Opciones: [],
cambioProp: 1,
},
{
tipo: 'texto', // Tipo del rasgo
etiqueta: 'Href', // La etiqueta que verás en Configuración
nombre: 'path-url', // El nombre del atributo/propiedad a usar en el componente
cambioProp: 1,
},
{
tipo: 'select',
etiqueta: 'Step',
Nombre: 'Select-Type',
opciones: inputTypes,
cambioProp: 1,
}
],
}),
init() {
depurador;
Además, el oyente cambia de 'change:attributes:*' a 'change:*'
this.listenTo(this, 'change:selectType', this.doStuff);
},
updated(property, value, prevValue) {
console.log('Gancho local: model.updated', 'property', property, 'value', value, 'prevValue', prevValue);
},
doStuff() {
switch (this.getTrait('select-type').props().value) {
Caso 'non':
this.getTrait('path-url').props().attributes.style = 'display: block';
this.getTrait('path').props().attributes.style = 'display: ninguno';
pausa;
Caso 'escalón':
this.getTrait('path-url').props().attributes.style = 'display: none';
this.getTrait('path').props().attributes.style = 'display: block';
pausa;
},
},
{
isComponent: function (el) {
if (el.tagName == 'A' || el.tagName == 'enlace') {
return {type: 'link'};
}
},
}),
Ver: dView
});`
Pero no refleja los cambios en la configuración de componentes. ¿Podemos cambiar el estilo de rasgo, como ocultar/mostrar dinámicamente? ¿Podemos asignar un valor de rasgo de tipo select al valor del rasgo de nombre de ruta o necesito implementar tipos personalizados para eso?
Respuestas (2)
- Has llamado al rasgo 'nombre: 'select-type', pero estás escuchando 'change:selectType', así que arréglalo cambiando el oyente en 'change:select-type'
- No te fíes del valor de rasgo 'this.getTrait('select-type').props().value' sino del propio componente 'this.get('select-type')'
- Actualmente no puedes actualizar atributos de rasgos de esa manera, pero puedes hacer esto como 'getTrait('ID').view.el.style.display = 'ninguno';'
getTrait('ID').view no está definido.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3404
Problema con el Style Manager.
Hola @artf quiero ocultar y mostrar propiedades de estilo para un componente específico. Tras referenciar este problema https://github.com/...
Issue #6024
No se puede ocultar RTE para algún tipo de componente en particular
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome Enlace de demo reproducible https:...
Issue #3058
Cómo modificar propiedades de bloques existentes en el gestor de estilos
Versión: 0.15.9 Cómo modificar/eliminar algunas propiedades CSS para bloques existentes como (texto, imagen) en el gestor de estilos Tambié...
Issue #1047
[BUG] El modelo no puede cambiar después de cambiar el valor en el menú desplegable Seleccionar personalizado.
Hola, Estoy usando el enlace CDN para uvas JS de unpkg.com En mi proyecto, he usado un rasgo personalizado como menú desplegable de selecci...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.