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

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

Sidebar.vue

<!-- 侧滑菜单 组件 -->
<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

<!-- 首页 -->
<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.效果图