Vue移动端侧边导航栏实现

最近写Vue项目遇到了一个侧边导航栏需求，没有找到合适的组件库，所以就手动实现了

---

效果如图：（点击 open 弹出侧边栏）

---

实现代码

<template>
    <div>
      <div class="navigation-bar" @click="showSidebar()">
        {{ showText }}
      </div>
      <transition name="sidebar-trans">
        <div class="sidebar" v-if="sidebarIsShow">
          <div class="shade-layer">
            <div class="sidebar-background">
              <div style="margin-top: 25%; background-color: chartreuse;">
                Hello World
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
</template>

<script>
export default {
  data () {
    return {
      sidebarIsShow: false,
      showText: 'open'
    }
  },
  methods: {
    showSidebar () {
      this.sidebarIsShow = !this.sidebarIsShow
      this.showText = this.showText === 'open' ? 'close' : 'open'
    }
  }
}
</script>

<style lang="scss" scoped>
.navigation-bar{
  z-index: 999;
  position: fixed;
  width: 100%;
  height: 20%;
  padding: 5%;
}

.sidebar-trans {
  &-enter {
    transform: translateX(-100%); //整体划入之前隐藏在最左侧
  }

  &-enter-active {
    transition: all 0.5s ease; //划入过渡，用时0.5s
  }

  &-leave-to {
    transform: translateX(-100%); //整体划出之后隐藏在最左侧
  }

  &-leave-active {
    transition: all 0.5s ease; //划出过渡，用时0.5s
  }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shade-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba($color: #000000, $alpha: 0.5);
}

.sidebar-background{
  width: 60%;
  height: 100%;
  position: absolute;
  background-color: white;
}

</style>

参考文档：http://t.csdnimg.cn/wzbfu