function dropdownLSG() {
return {
mostrar:false,
mostrarlo() {
if (this.mostrar) {
this.mostrar = false;
// habilitar el scroll
document.getElementsByTagName('html')[0].style.overflow = 'auto';
}
else {
this.mostrar = true;
// deshabilitar el scroll
document.getElementsByTagName('html')[0].style.overflow = 'hidden';
}
},
cerrar() {
this.mostrar = false;
// habilitar el scroll
document.getElementsByTagName('html')[0].style.overflow = 'auto';
}
}
}
Y ya en la view que estemos llamar a los métodos Alpine llamar a métodos o usar variables:
x-on:click="mostrarlo()
x-data="dropdownLSG()"
x-on:click.away="cerrar()"
x-show="mostrar" <-- esa capa se muestra o no dependiendo si la variable está a true o false -->
Creación de clases dinámicas:
<!-- aplicará solo esas clases cuando el valor de mostrar sea true -->
<a :class="{'bg-opacity-100 text-orange-500': mostrar }"
No hay comentarios:
Publicar un comentario