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

Posted 2023-04-13

【中文标题】Vue.js：切换汉堡菜单图标

【英文标题】：Vue.js: toggle hamburger menu icons

【发布时间】：2018-08-10 09:55:54

【问题描述】：

我有一个带有汉堡菜单图标的标题，当我单击它时，我想将其更改为十字图标。如何在 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() ,

【参考方案1】：

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

请检查下面的sn-p：

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 表示歉意。 :)

【讨论】：

似乎这是一个解决方案，但我应该在<div v-else> 里面放什么？

看起来像 X 或十字图标。

是的，我明白，但我不明白我将如何制作动画。我的意思是，如果我在这个 div 中放入相同的代码，那么什么都不会改变。我需要点击一下动画。请参阅此示例：codepen.io/jenningscreate/pen/xrbxKZ 在此示例中使用了 jQuery，但我不知道如何在我的 Vue 模板中实现相同的行为。

@OlgaB codepen.io/jenningscreate/pen/xrbxKZ 中的动画完全基于 CSS。 jQuery 仅用于添加/删除类，您也可以在 Vue 中轻松完成。我在 codepen.io/jacobgoh101/pen/QQoJYX 中将示例转换为 Vue。你可以试试。这里主要是关于 CSS 的。与 javascript 或 Vue 无关。

@JacobGoh 非常感谢！这就是我想要的。