vue如何实现图标管理（动态图标样式Hamburger实现）

在前端开发中经常会用到一些动态图标，比较常见的就是hamburger了，常见的导航菜单中隐藏时为一般用三条横杠来表示有内容可以展开，当点击该按钮时，导航栏菜单显示，菜单按钮也变成了一个关闭的图标，表示可以通过它来关闭菜单，点击后关闭菜单并且图标恢复成横杠样式，我们常把这种动态样式称之为Hamburger。

我们可以看到，采用动态变化有种动态过渡效果，视觉上会比较柔和，更利于用户体验。因此我在项目中经常会用到一些Hamburger样式，可以实现很多种样式，基本原理就是通过改变每个横杠的角度、长度、透明度、位置来实现以下效果的，过度通过transition属性来定义。

这里定义了一个DIV，里面定义一个span标签来实现我们看到的横杠，这里我们将style属性进行了动态绑定，这样当我们切换类型的时候就可以直接跳到对应的样式中了，统一用transition: 'all .3s'来实现过渡效果。

<template> <div> <div class="ham" > <span class="ham-line" v-for="(line, index) in hamLine" :key="index" :style="{ width: line.width, top: line.top, transform: line.transform, opacity: line.opacity, transition: 'all .3s' }"> </span> </div> <div> <span v-for="(item,index) in lineStyle" :key="index" @click="change(item)" class="list">{{index}}</span> </div> </div> </template>

这里我把部分样式嵌入到了DATA数据中了，所以我们这里主要设置下通用样式即可，这里我们没有把所有的样式都写进来，就示范了几个，而且直接在同一个图标上进行改变的。

<style lang="scss" scoped> .ham{ width: 50px; height: 50px; cursor: pointer; line-height: 0; margin: 30px auto; .ham-line{ position: relative; display: inline-block; vertical-align: top; width: 100%; height: 5px; margin-top: 10px; background-color: rgb(247, 239, 239); } } .list{ color:beige; padding:5px; cursor: pointer; &:first-child{ display: none; } } </style>

这里我们没有把所有的样式都写进来，就示范了几个，第一条normalLine数据是正常的样式，后面的style是变化后不同的样式，每条数据中都指定了样式width、top、transform、opacity属性。

data(){ return{ lineStyle: { normalLine: [ { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' } ], style1: [ { width: '100%', top: '15px', transform: 'rotate(-45deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '0' }, { width: '100%', top: '-15px', transform: 'rotate(45deg)', opacity: '1' } ], style2: [ { width: '100%', top: '6px', transform: 'translateY(10px)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '0' }, { width: '100%', top: '-6px', transform: 'translateY(-10px)', opacity: '1' } ], style3: [ { width: '100%', top: '0', transform: 'translateX(-10px) rotate(-43deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' }, { width: '100%', top: '0', transform: 'translateX(-10px) rotate(43deg)', opacity: '1' } ], style4: [ { width: '100%', top: '0', transform: 'translateX(10px) rotate(43deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' }, { width: '100%', top: '0', transform: 'translateX(10px) rotate(-43deg)', opacity: '1' } ] }, hamLine: [], mobileMenu: false } },

主要是对数据的切换，因为样式我们已经写在了数据中，所以当我们切换数据的时候就改变了当前状态，在样式改变时我们都赋予了过渡效果transition: 'all .3s'，这就得到了我们想要的Hamburger了。

created() { this.hamLine = this.lineStyle.normalLine }, methods:{ change(item){ this.mobileMenu = !this.mobileMenu this.hamLine=this.mobileMenu ? item:this.lineStyle.normalLine } }

该功能没有难点，以上只是提供了一种实现的思路，这个主要还是控制CSS样式的，设置好DATA数据中的横杠的样式参数就可以了。

欢迎关注本人的公众号：编程手札

或者搜索公众ProgramNotes，文章也会在公众号更新