当前位置：首页 > VUE

vue实现滑动删除组件

2026-02-22 05:59:30VUE

实现滑动删除组件的步骤

使用Vue实现滑动删除组件可以通过结合手势事件和CSS动画来完成。以下是具体实现方法：

基本结构设计

创建一个Vue组件，包含可滑动的列表项和删除按钮。模板部分可以这样设计：

<template>
  <div class="swipe-item">
    <div 
      class="content"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      :style="{ transform: `translateX(${translateX}px)` }"
    >
      <slot></slot>
    </div>
    <div class="actions">
      <button @click="handleDelete">删除</button>
    </div>
  </div>
</template>

手势事件处理

在Vue组件的脚本部分实现触摸事件处理逻辑：

export default {
  data() {
    return {
      startX: 0,
      moveX: 0,
      translateX: 0,
      isDragging: false
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.isDragging = true
    },
    handleTouchMove(e) {
      if (!this.isDragging) return
      this.moveX = e.touches[0].clientX - this.startX
      // 限制只能向左滑动
      if (this.moveX < 0) {
        this.translateX = this.moveX
      }
    },
    handleTouchEnd() {
      this.isDragging = false
      // 滑动超过阈值时保持打开状态
      if (this.translateX < -50) {
        this.translateX = -80 // 设置删除按钮的宽度
      } else {
        this.translateX = 0 // 恢复原状
      }
    },
    handleDelete() {
      this.$emit('delete')
    }
  }
}

CSS样式设置

为组件添加必要的样式，确保滑动效果流畅：

<style scoped>
.swipe-item {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.content {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
  background: white;
  padding: 15px;
}

.actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff4444;
}
</style>

使用组件

在父组件中使用滑动删除组件：

<template>
  <div>
    <swipe-item v-for="(item, index) in items" :key="index" @delete="deleteItem(index)">
      {{ item.text }}
    </swipe-item>
  </div>
</template>

<script>
import SwipeItem from './SwipeItem.vue'

export default {
  components: { SwipeItem },
  data() {
    return {
      items: [
        { text: '项目1' },
        { text: '项目2' },
        { text: '项目3' }
      ]
    }
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

优化与扩展

为了更好的用户体验，可以添加以下优化：

vue实现滑动删除组件

添加滑动阻力效果，使滑动更自然
实现多个滑动方向（左滑删除，右滑标记等）
添加动画过渡效果
支持PC端的鼠标事件

// 在组件中添加鼠标事件支持
mounted() {
  this.$el.addEventListener('mousedown', this.handleMouseStart)
  this.$el.addEventListener('mousemove', this.handleMouseMove)
  this.$el.addEventListener('mouseup', this.handleMouseEnd)
},
beforeDestroy() {
  this.$el.removeEventListener('mousedown', this.handleMouseStart)
  this.$el.removeEventListener('mousemove', this.handleMouseMove)
  this.$el.removeEventListener('mouseup', this.handleMouseEnd)
},
methods: {
  handleMouseStart(e) {
    this.startX = e.clientX
    this.isDragging = true
  },
  handleMouseMove(e) {
    if (!this.isDragging) return
    this.moveX = e.clientX - this.startX
    if (this.moveX < 0) {
      this.translateX = this.moveX
    }
  },
  handleMouseEnd() {
    this.isDragging = false
    if (this.translateX < -50) {
      this.translateX = -80
    } else {
      this.translateX = 0
    }
  }
}