vue3模拟菜单的显示隐藏

<div class="flexBox">
   <div class="left" ref="leftDom">
    <button @click="asideRightBox">控制右侧盒子的显示与隐藏的按钮</button>
   </div>
   <div class="right"></div>
</div>



<scripts setUp lang="ts">

    let isRightShow = ref(false)
    const leftDom = ref()

    const asideRightBox = () => {
        isRightShow.value = !isRightShow.value
        leftDom.value.classList.toggle('is_active')
        
    }

</scripts>


<style>

    .flexBox {
      display: flex;
      height: 100%;
      width: 100%;

      .left{
        flex: 1
      }
      
      .right{
         width: 400px;
         height: 100%;
      }
    }

    .is_active {width: 70%}

    
</style>