vue 点击个人资料按钮显示侧边栏

最新推荐文章于 2024-05-05 04:04:04 发布

yhd1998

最新推荐文章于 2024-05-05 04:04:04 发布

阅读量718

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/yhd1998/article/details/109026958

版权

vue 专栏收录该内容

22 篇文章

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <style type="text/css">
       *{
           padding: 0;
           margin: 0;
           box-sizing: border-box;
       }
       .page{
           width: 100vw;
           height: 100vh;
           background-color: aliceblue;
           position: fixed;
           left: 0;
           top: 0;
       }
       .content{
           margin: 20px;
           float: left;
       }
       .rMenu{
           width: 50vw;
           height: 100vh;
           position: fixed;
           left: 0;
           top: 0;
           transform: translateX(100vw);
           background: #87CEEB;
           transition: transform 1s;//侧边栏过渡时间
       }
       .active{
           transform: translateX(70vw);
           background: #87CEEB;
       }
       .rMenuTop{
           text-align: left;
           margin: 10px;
           padding: 10px;
       }
       .rMenuContent{
           margin: 20px;
           width: 100px;
           background-color: #F0F8FF;
           border-radius: 10px;
           padding: 10px;
       }

   </style>
   <body>
       <div id="app">
           <div class="page">
               <div class="content">
                   首页
               </div>
               <div @click="toggleMenut" type="button" class="content">个人中心</div>
           </div>
           <div class="rMenu" :class="{active:isShow}" >
               <h2>个人中心</h2>
               <div class="rMenuContent">
                   个人资料
               </div>
               <div class="rMenuContent">
                   修改密码
               </div>
           </div>

       </div>
       <script type="text/javascript">
           var app = new Vue({
               el:"#app",
               data:{
                   isShow:false,
               },
               methods:{
                   toggleMenut:function(){
                       this.isShow = !this.isShow;
                   }
               }
           })
       </script>
   </body>
</html>