vue根据div不同宽度展示对应icon图标

根据左侧菜单栏不通宽度来展示相对应的icon图标

左侧宽度为两个值：64px / 200px

对应添加两个图标，分别v-if对应值

<i :class="'el-icon-arrow-right sort'" @click="toggleMenu" v-if="widthValue === 64"></i>
<i :class="'el-icon-arrow-left sort'"  @click="toggleMenu" v-if="widthValue === 200"></i>

给左侧菜单栏设置ref值，在mount钩子函数中通过this.$refs.设置的ref值.$el.clientWidth来获取左侧菜单宽度。

data节点中变量保存获取到的值。

data(){
    return{
       //保存当前菜单宽度
        widthValue:null
    }
}

切换菜单事件中通过$nextTick来获取更新后的宽度

 this.$nextTick(() => {
        this.widthValue = this.$refs.aside.$el.clientWidth
      })