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.效果圖