侧边栏组件(Vue)

蔚落 2021-07-24 20:29 704阅读 0赞

从右侧滑入
    
    使用方法:
    	外部传入draw的键,且键值为true开启
    	外部监听@changeShow事件,通过将传入的draw值改为false关闭

代码示例:  
侧边栏

<template>
        <transition name='move'>
          <div class='draw' v-show='draw'>
            <button @click="goEdit">返回</button>
          </div>
        </transition>
    </template>
    
    <script>
    
    
    export default { 
      props:['draw'],
      name:'edit',
      data(){ 
        return{ 
          show:false
        }
      },
      methods:{ 
        goEdit()
        { 
          this.$emit('changeShow');
        }
      }
    
    }
    </script>
    
    <style scoped>
    .draw{ 
      width: 100%;
      background-color: red;
      position: absolute;
      top:0;
      bottom: 0;
    }
    
    .move-enter,.move-leave-to{ 
      opacity:0;
      transform: translateX(100%);
    }
    
    .move-enter-to,.move-leave{ 
      opacity:1;
      transform: translateX(0);
    }
    
    .move-enter-active,.move-leave-active{ 
      transition:all 1s
    }
    
    
    </style>

使用:

<Edit :draw='draw' @changeShow='_changeShow' />
    
      _changeShow()
      { 
        this.draw=false;
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，704人围观）

还没有评论，来说两句吧...

相关阅读

相关小米侧边栏--css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2023年07月02日 09:26/ 0 赞/ 52 阅读

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![ec862e11c6ccf6a4cf431

梦里梦外;/ 2023年01月14日 04:57/ 0 赞/ 373 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 341 阅读

相关 vue element menu侧边导航栏数据渲染

<template>  <!--unique

「爱情、让人受尽委屈。」/ 2022年10月29日 14:26/ 0 赞/ 37 阅读

相关 vue element menu侧边导航栏

<template>  <!--unique

港控/mmm°/ 2022年10月29日 14:25/ 0 赞/ 54 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 334 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 398 阅读

相关 vue-admin-template 修改侧边栏

(1) 注册路由 router.js---->添加或更改测边框的模块注意：模块的路径 (2) 在Views文件下增加相应的模块.vue (3) 在 conponen

港控/mmm°/ 2021年11月19日 12:12/ 0 赞/ 777 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 705 阅读

相关 flutter 侧边栏组件、分割线组件Divder

1、在Scaffold组件中与body同级定义右侧侧边栏将drawer换成endDrawer drawer:Drawe

左手的ㄟ右手/ 2021年07月24日 15:07/ 0 赞/ 513 阅读