vue实现点击按钮展开侧边栏，再点击按钮收起

最近项目里有个需求需要点击按钮实现侧边栏展开收起状态，看了很多，其他实现都是比较复杂的，下方是用最简便的代码实现想要的效果。
如果所示：

//侧边栏内容区域 
//为了看的方便，只放主要代码,内容根据需求定义
<div class="m-slidebar" >
	//按钮区域
    <span class="m-closeBtn" id='m-closeBtn' @click="dianji"><Icon color="white" icon="ant-design:right-circle-outlined"></Icon></span>
    <div>内容区域</div>
</div>

//style样式区域
<style scoped lang='less'>
.addWidth {
  height: 100vh!important;
  right: 0px!important;
  width: 580px!important;
  min-width:580px!important;
  position: absolute;
  z-index: 11!important;
  top: 0px!important;
  bottom: 0px!important;
}
//我这里用的绝对定位,当然我在其他地方也有设置相对定位，我这里有个地图，不用绝对定位会覆盖，你们也可以使用固定定位.
.m-slidebar{
  height: 100vh!important;
  transition: width 1s;
  right: -580px;    /* 侧边栏有多宽，就-多少，相当于先藏在视窗外边（从左边打开的话就换成left）,我这个侧边栏在右边 */
  width: 580px;
  min-width: 580px;
  position: absolute;   
  z-index: 11;
  transition: all 0.2s;
  height: calc(100vh - 2.5rem);
  background: white;
  box-shadow: 0px 5px 5px rgba(11,2,5,0.1);
  top: 0px;
  bottom: 0px;
  .m-closeBtn{
    position: absolute;
    width: 30px;
    height: 40px;
    left: -30px;
    background-image: linear-gradient(135deg, #5e60eb 3%, #4282fa 100%),linear-gradient(#edf2fc, #edf2fc);
    box-shadow: 0px 5px 5px rgba(11,2,5,0.1);
    border-radius: 6px 0px 0px 6px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
	}
}
</style>

1.vue项目没有用到jquery的话，就用原生js方法如下代码：

//添加按钮点击事件
function dianji() {
  //获取dom元素
  var sideBar = document.getElementsByClassName('m-slidebar')[0];
  //我的逻辑上是先判断没有这个class，没有的话就添加，这个添加动作会触发宽度加长的过渡效果
  console.log(sideBar.classList);
  if(!sideBar.classList.contains('addWidth')){
    console.log(sideBar.classList.contains('addWidth'));
    console.log(sideBar.classList);
    sideBar.classList.add("addWidth")
    
  }
 //同理，展开之后要切换，移除这个class来触发减小宽度的过渡效果
  else{
    sideBar.classList.remove("addWidth");
  }
}

2.Jquery写法

//
$("#m-closeBtn").click(function () {
    var sideBar = $(".m-slidebar");
    //我的逻辑上是先判断没有这个class，没有的话就添加，这个添加动作会触发宽度加长的过渡效果
    if (!sideBar.hasClass("addWidth")) {
        $(".m-slidebar").addClass("addWidth");
    }
    //同理，展开之后要切换，移除这个class来触发减小宽度的过渡效果
    else {
        $(".m-slidebar").removeClass("addWidth");
    }
})