初窥门径Vue菜单栏的设置，初学者值得一看

2023-11-13 01:15:11

如何在 Vue 中创建悬浮菜单

悬浮菜单是一种常见的 UI 元素，允许用户快速访问一系列操作或信息，而无需离开当前页面。在 Vue 中创建悬浮菜单非常简单，本教程将逐步指导您完成整个过程。

实现悬浮菜单组件

首先，在父组件中创建一个 isMenuVisible 数据属性，用于控制菜单的显示状态。然后，添加一个点击事件监听器，并在单击事件中切换 isMenuVisible 的值。这样，当用户单击组件时，菜单将显示或隐藏。

<template>
  <div class="menu-wrapper">
    <button @click="toggleMenu">Menu</button>
    <div class="menu" v-if="isMenuVisible">
      <!-- 菜单项 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuVisible: false,
    };
  },
  methods: {
    toggleMenu() {
      this.isMenuVisible = !this.isMenuVisible;
    },
  },
};
</script>

定义菜单项

在子组件中，定义菜单项并使用 v-if 指令控制它们的显示状态。当 isMenuVisible 为 true 时，菜单项将显示，否则将隐藏。

<template>
  <ul>
    <li v-if="isMenuVisible">Item 1</li>
    <li v-if="isMenuVisible">Item 2</li>
    <li v-if="isMenuVisible">Item 3</li>
  </ul>
</template>

添加样式

最后，使用 CSS 为菜单和菜单项添加样式，以便在页面上正确显示它们。

.menu-wrapper {
  position: relative;
}

.menu {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #fff;
  padding: 10px;
  display: none;
}

.menu.active {
  display: block;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu li {
  padding: 5px 10px;
}

实战示例

以下是一个完整的 Vue 组件示例，展示了如何创建一个浮动菜单：

<template>
  <div class="menu-wrapper">
    <button @click="toggleMenu">Menu</button>
    <div class="menu" v-if="isMenuVisible">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuVisible: false,
    };
  },
  methods: {
    toggleMenu() {
      this.isMenuVisible = !this.isMenuVisible;
    },
  },
};
</script>

<style>
.menu-wrapper {
  position: relative;
}

.menu {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #fff;
  padding: 10px;
  display: none;
}

.menu.active {
  display: block;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu li {
  padding: 5px 10px;
}
</style>