基于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技术站
微信扫一扫 
支付宝扫一扫 