vue自定义抽屉显示与隐藏

<div class="index">
  <div id="setFloating">
   <i  id="setFloatingIcon" class="el-icon-caret-left" @click="shrink"></i>
   <span>我是首页</span>
</div>

main.js中

import './style/commen.less'

Vue.prototype.shrink=function(){
  let demo=document.querySelector('#setFloating')
  let icon=document.querySelector('#setFloatingIcon')
  if(demo.className){
    demo.className=''
    icon.className='el-icon-caret-left'
  }else{
    demo.className='floatingRight'
    icon.className='el-icon-caret-right'
  }
}

commen.less中

#setFloating{
    width: 300px;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    transition:all 0.3s linear;
    padding: 15px;
    // z-index: 100;
    i {
      position: absolute;
      left: 305px;
      top: 380px;