vue实现鼠标移过出现下拉二级菜单功能

基于Vue.js实现鼠标移过出现下拉二级菜单功能的完整攻略如下：

步骤一：准备数据源

首先，我们需要准备一个数据源来存储菜单信息。数据源可以是一个包含菜单项和对应子菜单的数组对象，也可以是一个JSON文件。在本例中，我们用一个对象数组来存储数据源，对象包含两个属性：

text：菜单项的文本内容
children：菜单项下的子菜单，是一个包含子菜单项的数组对象

下面是一个数据源的示例：

let menuItems = [
  {
    text: '首页',
    children: []
  },
  {
    text: '产品',
    children: [
      {
        text: '产品1'
      },
      {
        text: '产品2'
      },
      {
        text: '产品3'
      }
    ]
  },
  {
    text: '服务',
    children: [
      {
        text: '服务1'
      },
      {
        text: '服务2'
      }
    ]
  }
]

步骤二：构建Vue组件

接下来，我们需要构建一个Vue组件来渲染菜单。组件包括以下代码：

<template>
  <ul class="menu">
    <li v-for="item in items" :key="item.text" @mouseenter="showSubMenu(item)"
        @mouseleave="hideSubMenu">
      {{ item.text }}
      <ul v-if="item.children" :class="{ 'is-active': subMenuVisible }">
        <li v-for="subItem in item.children" :key="subItem.text">{{ subItem.text }}</li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      subMenuVisible: false
    }
  },
  methods: {
    showSubMenu(item) {
      this.subMenuVisible = true
    },
    hideSubMenu() {
      this.subMenuVisible = false
    }
  }
}
</script>

<style scoped>
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu > li {
  display: inline-block;
  padding: 10px;
  position: relative;
}
.menu > li ul {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
}
.menu > li ul.is-active {
  display: block;
}
</style>

该组件包含以下部分：

template：组件的模板，用于渲染菜单项和子菜单
props：组件的输入属性，用于接收数据源
data：组件的状态，用于记录当前子菜单的显示状态
methods：组件的方法，用于处理菜单项的鼠标事件
style：组件的样式，用于布局和美化菜单

步骤三：使用Vue组件

在步骤二中，我们已经完成了一个菜单的Vue组件。现在，我们需要在页面中使用该组件，并传递数据源。我们可以在Vue实例中引入组件，并将菜单数据源传递给组件的items属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Mouseover Dropdown Menu</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">
    <menu :items="menuItems"></menu>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="app.js"></script>
</body>
</html>

在这个示例中，我们将Vue实例挂载到#app元素，使用了一个名为menu的组件，并将菜单数据源传递给了items属性。

示例1：使用自定义指令

我们可以使用自定义指令来实现菜单项的事件处理逻辑，代码如下：

<template>
  <ul class="menu">
    <li v-for="item in items" :key="item.text"
        v-hover="{ enter: () => showSubMenu(item), leave: hideSubMenu }">
      {{ item.text }}
      <ul v-if="item.children" :class="{ 'is-active': subMenuVisible }">
        <li v-for="subItem in item.children" :key="subItem.text">{{ subItem.text }}</li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      subMenuVisible: false
    }
  },
  methods: {
    showSubMenu(item) {
      this.subMenuVisible = true
    },
    hideSubMenu() {
      this.subMenuVisible = false
    }
  },
  directives: {
    hover: {
      bind(el, binding) {
        const callbacks = binding.value
        el.addEventListener('mouseenter', callbacks.enter)
        el.addEventListener('mouseleave', callbacks.leave)
      },
      unbind(el, binding) {
        const callbacks = binding.value
        el.removeEventListener('mouseenter', callbacks.enter)
        el.removeEventListener('mouseleave', callbacks.leave)
      }
    }
  }
}
</script>

在该示例中，我们使用了自定义指令v-hover来监听菜单项的鼠标事件，并使用JavaScript函数作为指令的值传递给指令。具体来说，我们在指令的bind和unbind钩子函数中，分别向菜单项元素添加和移除鼠标事件监听器。

以下是使用该自定义指令的示例：

<li v-for="item in items" :key="item.text"
    v-hover="{ enter: () => showSubMenu(item), leave: hideSubMenu }">
  {{ item.text }}
</li>

示例2：使用修饰符和计算属性

在Vue中，我们可以使用修饰符来对指令的行为进行修饰。在本例中，我们可以使用@mouseenter.prevent修饰符，来阻止鼠标事件的默认行为，例如，阻止浏览器自动打开链接。另外，我们还可以使用计算属性来控制子菜单的显示状态。

以下是使用修饰符和计算属性的代码示例：

<template>
  <ul class="menu">
    <li v-for="item in items" :key="item.text"
        @mouseenter.prevent="showSubMenu(item)"
        @mouseleave="hideSubMenu">
      {{ item.text }}
      <ul v-if="hasSubMenu(item)" :class="{ 'is-active': isSubMenuVisible(item) }">
        <li v-for="subItem in item.children" :key="subItem.text">{{ subItem.text }}</li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    showSubMenu(item) {
      this.subMenuVisible = true
    },
    hideSubMenu() {
      this.subMenuVisible = false
    },
    hasSubMenu(item) {
      return item.children && item.children.length > 0
    }
  },
  computed: {
    subMenuVisibleItem() {
      return this.items.find(item => item.subMenuVisible)
    }
  }
}
</script>

在该示例中，我们使用了代替v-hover指令的@mouseenter.prevent修饰符，同时使用了计算属性subMenuVisibleItem来获取当前显示子菜单的菜单项。

以上两个示例演示了使用不同的方式来实现Vue鼠标移过出现下拉二级菜单的功能，您可以根据自己的需求选择相应的实现方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现鼠标移过出现下拉二级菜单功能 - Python技术站