Para usar Vue 3 para simular la animación de desplazamiento del mouse en Mac Dock, puede usar los efectos de transición de Vue y el enlace de clases dinámico para lograrlo.
<div id="app">
<div class="dock">
<div
class="dock-item"
v-for="(item, index) in dockItems"
:key="index"
:class="{ active: item.active }"
@mouseover="hoverItem(index)"
@mouseout="unhoverItem(index)"
>
{
{ item.name }}
</div>
</div>
</div>
Código CSS:
.dock {
display: flex;
justify-content: center;
background-color: #f0f0f0;
padding: 10px;
}
.dock-item {
padding: 10px;
cursor: pointer;
}
.dock-item.active {
background-color: #c0c0c0;
color: #fff;
}
Código de vista:
const app = Vue.createApp({
data() {
return {
dockItems: [
{ name: 'Safari', active: false },
{ name: 'Mail', active: false },
{ name: 'Calendar', active: false },
{ name: 'Notes', active: false }
]
};
},
methods: {
hoverItem(index) {
this.dockItems[index].active = true;
},
unhoverItem(index) {
this.dockItems[index].active = false;
}
}
});
app.mount('#app');
En el código anterior, creamos una aplicación Vue usando Vue 3 y definimos una dockItemsmatriz de datos, en la que cada elemento del Dock contiene información sobre el nombre y el estado de la actividad.
En HTML, usamos las instrucciones de Vue v-forpara recorrer la representación de elementos del Dock y usamos el enlace de clases dinámicas :classpara activecambiar el estilo de los elementos según los atributos. Cuando pase el mouse, llame hoverItemal método para establecer la activepropiedad del elemento Dock en true, cambiando así el estilo del elemento. Cuando el mouse se vaya, llame al método para configurar unhoverItemla propiedad del elemento Dock para restaurar el estilo del elemento.activefalse
Asegúrese de incluir la biblioteca Vue.js en su archivo HTML y coloque el código anterior en la ubicación correcta.
De esta manera, cuando copia el código en el archivo HTML y lo abre en el navegador, puede ver el efecto de Vue 3 simulando la animación del mouse en la base de Mac.