vue实现一个鼠标放在左边栏实现一个宽度变宽的一个动画效果

       在开发项目时经常会遇到这样的项目就是(ERP)后台管理，有鼠标放在左边栏实现一个宽度变宽的一个动画效果这样需求!!!

效果：主要是通过@mouseenter的鼠标移入的事件触发，拿到在data里设置的初始状态去改变，这时候就会有动画的效果出现，当右侧的内容区移动后会出现一个yes/no这个主要是起了一个锁定状态的作用点击yes/no的时候视图渲染变为no则以锁定，反之则为锁定锁定后导航栏将全部展示出来！！！

注意： 我已经把注释写在上边，有需要的可以看这注释取代码！

1.这是<template></template>！！！

<template>
  <div class="home">
    <div class="main">
      <!-- left的导航栏和动画效果 -->
      <ul class="left_main" :class="{ left_main_shou: !openStatus }" @mouseleave='changetow'>
        <div style="position: fixed;top: 50px;left: 13%;" @click="changethree" :class="openStatusall?'el-icon-check':'el-icon-close'">{
  {openTextname}}</div>
        <h1 class="ones"  @mouseenter='change'>{
  { openText }}</h1>
        <li style="margin-top: 100px;width: 100px;height: 30px;display:block;" class="el-icon-platform-eleme">饿了吗</li>
        <li style="margin-top: 5px;width: 100px;height: 30px;display:block;" class="el-icon-user-solid">客户统计</li>
        <li style="margin-top: 5px;width: 100px;height: 30px;display:block;" class