vue 左侧伸缩菜单

vue左侧伸缩菜单。  鼠标点击出现    移除范围消失 

效果图： 

 

 

<template>
    <div class="menu-left"  > 
        <div class="left_main" :class="{ left_main_show: !openStatus } "  @mouseleave="change">
            <div class="menu-left-button">
                <div class="button1" v-if="!openStatus">
                    <div  v-if="!open_text" > 行业动态概况 </div>
                    <i class="hydt"></i>
                </div>
                <div class="button1" v-if="!openStatus">
                    <div  v-if="!open_text" > 组织与机构建设 </div>
                    <i class="zzjg"></i>
                </div>
            </div>
        </div>
        <div class="right_main">
            <div class="open_close">
                <img src="../../assets/img/bieliananniu@2x.png" alt="" @click="change" v-if="open_close"
                    class="bieliananniu" />
            </div>
        </div>

    </div>
</template>
 <script>
 export default {
     name: "menuLeft",
     data() {
         return {
             openStatus: true,
             open_close: true,
             open_text: true,
         }
     },
     methods: {
         change() {
             this.openStatus = !this.openStatus
             if (this.openStatus) {
                 setTimeout(() => {
                     this.open_close = true
                      this.open_text = true
                 }, 1000)
             }
             else {
               this.open_close = false
               setTimeout(() => {
                     this.open_text = false
                 }, 1000)
             }
         },
     },
 }
 </script>