使用vue3模拟Mac程序坞鼠标悬停动画

要使用 Vue 3 模拟 Mac 程序坞（Dock）鼠标悬停动画，你可以使用 Vue 的过渡效果和动态类绑定来实现。

<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>

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;
}

Vue 代码：

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');

在上述代码中，我们使用 Vue 3 创建了一个 Vue 应用，并定义了一个 dockItems 数据数组，其中每个 Dock 项都包含名称和活动状态的信息。

在 HTML 中，我们使用 Vue 的指令 v-for 循环渲染 Dock 项，并通过动态类绑定 :class 来根据 active 属性来切换项的样式。当鼠标悬停时，调用 hoverItem 方法将 Dock 项的 active 属性设置为 true，从而改变项的样式。当鼠标离开时，调用 unhoverItem 方法将 Dock 项的 active 属性设置为 false，还原项的样式。

请确保在 HTML 文件中引入了 Vue.js 库，并将以上代码放置在正确的位置。

这样，当你将代码复制到 HTML 文件中并在浏览器中打开时，就可以看到 Vue 3 模拟 Mac 程序坞鼠标悬停动画的效果了。