vue实现侧边栏滑出

实现侧边栏滑出的方法

使用Vue的过渡动画

通过Vue的<transition>组件结合CSS过渡效果实现侧边栏滑入滑出。定义一个控制侧边栏显示隐藏的变量，通过点击按钮切换状态。

<template>
  <div>
    <button @click="showSidebar = !showSidebar">切换侧边栏</button>
    <transition name="slide">
      <div v-if="showSidebar" class="sidebar">
        <!-- 侧边栏内容 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSidebar: false
    }
  }
}
</script>

<style>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: #333;
  color: white;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
}
</style>

结合Vuex管理状态

当侧边栏状态需要在多个组件间共享时，可以使用Vuex管理侧边栏的显示状态。

// store.js
export default new Vuex.Store({
  state: {
    sidebarVisible: false
  },
  mutations: {
    toggleSidebar(state) {
      state.sidebarVisible = !state.sidebarVisible
    }
  }
})

<template>
  <button @click="$store.commit('toggleSidebar')">切换侧边栏</button>
  <transition name="slide">
    <div v-if="$store.state.sidebarVisible" class="sidebar">
      <!-- 侧边栏内容 -->
    </div>
  </transition>
</template>

使用第三方UI库

Element UI、Vuetify等流行的Vue UI库提供了现成的侧边栏组件，可以直接使用。

以Element UI为例：

<template>
  <el-button @click="drawer = true">打开侧边栏</el-button>
  <el-drawer
    title="标题"
    :visible.sync="drawer"
    direction="ltr"
    size="50%">
    <span>侧边栏内容</span>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawer: false
    }
  }
}
</script>

响应式侧边栏

根据屏幕宽度自动调整侧边栏显示方式，通常在小屏幕设备上隐藏，大屏幕显示。

<template>
  <div class="container">
    <div :class="['sidebar', { 'mobile-hidden': isMobile && !showSidebar }]">
      <!-- 侧边栏内容 -->
    </div>
    <div class="main-content">
      <button @click="showSidebar = !showSidebar" v-if="isMobile">
        切换侧边栏
      </button>
      <!-- 主要内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSidebar: false,
      isMobile: false
    }
  },
  mounted() {
    this.checkScreenSize()
    window.addEventListener('resize', this.checkScreenSize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScreenSize)
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768
    }
  }
}
</script>

<style>
.container {
  display: flex;
}

.sidebar {
  width: 250px;
  transition: transform 0.3s;
}

.main-content {
  flex: 1;
}

@media (max-width: 768px) {
  .mobile-hidden {
    transform: translateX(-100%);
  }
}
</style>

手势滑动支持

为移动设备添加手势滑动操作支持，可以通过监听touch事件实现。

<template>
  <div 
    class="sidebar-container"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
  >
    <div :class="['sidebar', { 'open': isOpen }]">
      <!-- 侧边栏内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      startX: 0,
      currentX: 0
    }
  },
  methods: {
    touchStart(e) {
      this.startX = e.touches[0].clientX
    },
    touchMove(e) {
      this.currentX = e.touches[0].clientX
      const diff = this.currentX - this.startX
      if (diff > 50 && !this.isOpen) {
        this.isOpen = true
      }
    },
    touchEnd() {
      this.startX = 0
      this.currentX = 0
    }
  }
}
</script>

<style>
.sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s;
}

.sidebar.open {
  transform: translateX(0);
}
</style>