代码之家 › 专栏 › 技术社区 › Olga B

Vue。js:切换汉堡菜单图标

hamburger-menu toggle vue.js javascript

1

Olga B · 技术社区 · 8 年前

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

这是我的菜单图标:

<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() {},

1 回复 | 直到 6 年前

1

4

MarredCheese Lionia Vasilev 6 年前

你是说这种实现吗? 我刚刚加上 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表示歉意。:)