Vue.js:切换汉堡菜单图标 [英] Vue.js: toggle hamburger menu icons

查看：27
本文介绍了Vue.js:切换汉堡菜单图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个带有汉堡菜单图标的标题，当我单击它时，我想将其更改为十字图标.如何在 Vue 模板中做到这一点?我在计算属性中创建了一个函数，但我不确定我应该做什么.

这是我的菜单图标:

<div class="main-item menu"><span class="line line01"></span><span class="line line02"></span><span class="line line03"></span>

这是我的 CSS:

.top-icon {背景:#29afd1；显示:内联块；边框半径:500px；边距:10px；位置:相对；填充:80px；光标:指针；}.main-item {宽度:150px；高度:150px；位置:相对；}.线 {位置:绝对；高度:15px；宽度:100%；背景:白色；边框半径:10px；过渡:所有cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;}.line01 {顶部:19%；}.line02 {最高:49%；}.line03 {最高:79%；}.menu.close .line01 {变换:旋转(45度)；最高:49%；}.menu.close .line02, .menu.close .line03 {变换:旋转(-45度)；最高:49%；}

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

data() {返回 {showTopMenu: 假，};},计算:{切换TopMenu() {},

解决方案

你是说这种实现吗?我刚刚在你的代码中添加了 v-if 和 v-else

请检查下面的代码片段:

new Vue({el: "#app",数据: {showTopMenu: 假，}})

.top-icon {背景:#29afd1；显示:内联块；边框半径:500px；边距:10px；位置:相对；填充:80px；光标:指针；}.main-item {宽度:150px；高度:150px；位置:相对；}.线 {位置:绝对；高度:15px；宽度:100%；背景:白色；边框半径:10px；过渡:所有cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s；}.line01 {顶部:19%；}.line02 {最高:49%；}.line03 {最高:79%；}.menu.close .line01 {变换:旋转(45度)；最高:49%；}.menu.close .line02, .menu.close .line03 {变换:旋转(-45度)；最高:49%；}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script><div id="应用程序"><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 v-else>X

不过，我对用户界面表示歉意.:)

I have a header with a hamburger menu icon which I want to change to a cross icon when I click on this. How to do this in the Vue template? I created a function in the computed property but I am not sure what I should do.

Here is my menu icon:

<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>

This is my 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%;
}

So far, this is what I have inside script tags:

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

解决方案

Do you mean this kind of implementation? I just added v-if and v-else on your code

Please check the snippet below:

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>

I apologize about the UI though. :)

这篇关于Vue.js:切换汉堡菜单图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆