Vue.js：切换汉堡菜单图标

Question

我有一个带有汉堡菜单图标的 header，我想在单击它时将其更改为十字图标。如何在 Vue 模板中执行此操作？我在计算属性中创建了一个函数，但我不确定我应该做什么。

这是我的菜单图标：

<div class="top-icon" :class="toggleTopMenu" @click="showTopMenu = !showTopMenu">
  <div class="main-item menu">
    <span class="line line01"></span>
    <span class="line line02"></span>
    <span class="line line03"></span>
  </div>
</div>

这是我的 CSS:

.top-icon {
  background: #29afd1;
  display: inline-block;
  border-radius: 500px;
  margin: 10px;
  position: relative;
  padding: 80px;
  cursor: pointer;
}

.main-item {
  width: 150px;
  height: 150px;
  position: relative;
}

.line {
  position: absolute;
  height: 15px;
  width: 100%;
  background: white;
  border-radius: 10px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line01 {
  top: 19%;
}

.line02 {
  top: 49%;
}

.line03 {
  top: 79%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
}

.menu.close .line02, .menu.close .line03 {
  transform: rotate(-45deg);
  top: 49%;
}

到目前为止，这是我在脚本标签中的内容：

data() {
  return {
    showTopMenu: false,
  };
},
computed: {
toggleTopMenu() {},

Answer 1

你是指这种实现方式吗？我刚刚在您的代码中添加了 v-if 和 v-else

请检查以下代码段：

new Vue({
  el: "#app",
  data: {
    showTopMenu: false,
  }
})

.top-icon {
  background: #29afd1;
  display: inline-block;
  border-radius: 500px;
  margin: 10px;
  position: relative;
  padding: 80px;
  cursor: pointer;
}

.main-item {
  width: 150px;
  height: 150px;
  position: relative;
}

.line {
  position: absolute;
  height: 15px;
  width: 100%;
  background: white;
  border-radius: 10px;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line01 {
  top: 19%;
}

.line02 {
  top: 49%;
}

.line03 {
  top: 79%;
}

.menu.close .line01 {
  transform: rotate(45deg);
  top: 49%;
}

.menu.close .line02, .menu.close .line03 {
  transform: rotate(-45deg);
  top: 49%;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <div class="top-icon" class="toggleTopMenu" @click="showTopMenu = !showTopMenu">
    <div class="main-item menu" v-if="!showTopMenu">
      <span class="line line01"></span>
      <span class="line line02"></span>
      <span class="line line03"></span>
    </div>
    <div v-else>
      X
    </div>
  </div>
</div>

尽管如此，我对 UI 表示歉意。 :)

Vue.js：切换汉堡菜单图标

Vue.js: toggle hamburger menu icons

javascript

toggle

vue.js

hamburger-menu