当前位置：首页 > VUE

vue实现滑动面板

2026-01-18 06:28:56VUE

实现滑动面板的基本思路

在Vue中实现滑动面板功能，可以通过结合CSS过渡效果和Vue的响应式特性来完成。常见的滑动面板包括侧边栏、底部弹出面板等。

使用CSS过渡和v-show

通过v-show控制面板的显示隐藏，结合CSS过渡效果实现平滑滑动。

<template>
  <div>
    <button @click="showPanel = !showPanel">Toggle Panel</button>
    <div class="panel" :class="{ 'panel-active': showPanel }">
      <!-- 面板内容 -->
    </div>
  </div>
</template>

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

<style>
.panel {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100vh;
  background: #fff;
  transition: all 0.3s ease;
}

.panel-active {
  right: 0;
}
</style>

使用Vue过渡组件

Vue提供了内置的过渡组件，可以更方便地实现动画效果。

<template>
  <div>
    <button @click="showPanel = !showPanel">Toggle Panel</button>
    <transition name="slide">
      <div class="panel" v-if="showPanel">
        <!-- 面板内容 -->
      </div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}

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

.panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: #fff;
}
</style>

实现可拖拽滑动面板

如果需要实现可拖拽调整位置的滑动面板，可以结合touch或mouse事件。

<template>
  <div>
    <div 
      class="draggable-panel"
      :style="{ transform: `translateY(${offsetY}px)` }"
      @mousedown="startDrag"
      @touchstart="startDrag"
    >
      <!-- 面板内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offsetY: 0,
      startY: 0,
      dragging: false
    }
  },
  methods: {
    startDrag(e) {
      this.dragging = true
      this.startY = e.type === 'mousedown' ? e.clientY : e.touches[0].clientY
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('touchmove', this.onDrag)
      document.addEventListener('mouseup', this.stopDrag)
      document.addEventListener('touchend', this.stopDrag)
    },
    onDrag(e) {
      if (!this.dragging) return
      const clientY = e.type === 'mousemove' ? e.clientY : e.touches[0].clientY
      this.offsetY = clientY - this.startY
    },
    stopDrag() {
      this.dragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('touchmove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
      document.removeEventListener('touchend', this.stopDrag)
    }
  }
}
</script>

<style>
.draggable-panel {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 300px;
  background: #fff;
  cursor: grab;
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用专门的面板组件库：

vue-draggable-resizable：提供可拖拽和调整大小的面板
vue-simple-sidenav：专注于侧边导航面板
vue-slide-up-down：实现上下滑动效果

安装和使用示例：

vue实现滑动面板

npm install vue-slide-up-down

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <slide-up-down :active="show">
      <div class="panel">
        <!-- 面板内容 -->
      </div>
    </slide-up-down>
  </div>
</template>

<script>
import SlideUpDown from 'vue-slide-up-down'

export default {
  components: { SlideUpDown },
  data() {
    return {
      show: false
    }
  }
}
</script>