vue2.X 自定义 侧滑菜单 组件

1.vue2.0 封装 侧滑菜单组件

Sidebar.vue

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

<!-- 侧滑菜单 组件 --> <template>   <div>     <transition name="fold">       <div class="sidebar" v-show="sidebarShow">         侧滑菜单       </div>     </transition>     <transition name="fade">       <div class="mask" @click.stop.prevent="hide" v-show="sidebarShow"></div>     </transition>   </div> </template>   <script type="text/ecmascript-6">   export default {     //接收父组件传值     props: {       sidebarShow: {         type: Boolean,         default: false       }     },     data() {       return {         data: [] //初始化数据       }     },     //生命周期创建观察数据     created() {       },     //观察路由跳转更新数据     watch: {       },     methods: {       //隐藏侧边栏,向上派发事件(向父组件传值)       hide() {         this.$emit('hideSidebar', false);       }     },     computed: {       },     //注册组件     components: {       }   } </script>   <style lang="less" scoped>   .sidebar{     position: fixed;     top: 0px;     right: 0px;     z-index: 50;     height: 100%;     width: 230px;     // background-color: rgb(35, 42, 48);     background-color: #fff;     transform: translate3d(0, 0, 0);   }   .mask{     position: fixed;     top: 0px;     left: 0px;     width: 100%;     height: 100%;     z-index: 40;     background: rgba(7, 17, 27, 0.6);     opacity: 1;     &.fade-enter-active, &.fade-leave-active{       transition: all 0.5s;     }     &.fade-enter, &.fade-leave-active{       opacity: 0;     }   } </style>

2.父组件 调用

home.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<!-- 首页 --> <template>   <div>     <!-- 头部 -->     <mt-header title="综合管理平台">       <!-- 点击按钮 显示侧滑菜单 -->       <mt-button icon="more" @click="showSide" slot="right"></mt-button>     </mt-header>     <!-- 侧滑菜单 -->     <mSidebar :sidebarShow="sidebarShow" v-on:hideSidebar="setSidebar"></mSidebar>   </div> </template>   <script>   // 引入 侧滑菜单组件   import mSidebar from '../../components/Sidebar.vue'     export default {     name: 'home',     components: {       // 注册组件       mSidebar     },     data() {       return {         sidebarShow:false // 默认值       }     },     created() {       },     methods: {       // 显示 侧滑菜单       showSide(){         this.sidebarShow = true;       },       // 接收 Sidebar组件的返回值 隐藏 侧滑菜单       setSidebar(val){         this.sidebarShow = val;       }     }   } </script>   <style lang="less" scoped>   </style>

 

3.效果图