需求：开发Angular滑动按钮组件，实现滑动至末端触发函数

这里给你一个完整的Angular滑动按钮组件实现，支持桌面端鼠标拖动和移动端触摸操作，滑到末端后自动触发指定函数。

1. 组件文件实现 #

模板文件（slide-button.component.html） #

<div class="slide-container" #slideContainer>
  <div 
    class="slide-handle" 
    #slideHandle
    [style.left]="currentPosition + 'px'"
    (mousedown)="startSlide($event)"
    (touchstart)="startSlide($event)"
  ></div>
  <div class="slide-tip">
    {{ isCompleted ? '验证完成' : '滑动到最右边完成验证' }}
  </div>
</div>

样式文件（slide-button.component.css） #

.slide-container {
  position: relative;
  width: 300px;
  height: 40px;
  background-color: #f5f5f5;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.slide-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 36px;
  height: 36px;
  background-color: #1677ff;
  border-radius: 50%;
  transition: left 0.1s ease;
}

.slide-tip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #666;
  pointer-events: none;
}

逻辑文件（slide-button.component.ts） #

import { Component, Input, ViewChild, ElementRef, HostListener, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-slide-button',
  templateUrl: './slide-button.component.html',
  styleUrls: ['./slide-button.component.css']
})
export class SlideButtonComponent implements AfterViewInit {
  @Input() onSlideComplete?: () => void;
  @ViewChild('slideContainer') slideContainer!: ElementRef<HTMLDivElement>;
  @ViewChild('slideHandle') slideHandle!: ElementRef<HTMLDivElement>;

  isSliding = false;
  isCompleted = false;
  currentPosition = 0;
  maxPosition = 0;

  ngAfterViewInit(): void {
    // 计算最大可滑动距离：容器宽度 - 手柄宽度
    this.maxPosition = this.slideContainer.nativeElement.offsetWidth - this.slideHandle.nativeElement.offsetWidth;
  }

  startSlide(event: MouseEvent | TouchEvent): void {
    if (this.isCompleted) return;
    this.isSliding = true;
    event.preventDefault();
  }

  @HostListener('document:mousemove', ['$event'])
  @HostListener('document:touchmove', ['$event'])
  onSlideMove(event: MouseEvent | TouchEvent): void {
    if (!this.isSliding || this.isCompleted) return;

    // 获取鼠标/触摸点的X坐标
    const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
    // 计算手柄相对于容器的位置
    const containerLeft = this.slideContainer.nativeElement.getBoundingClientRect().left;
    const newPosition = clientX - containerLeft - this.slideHandle.nativeElement.offsetWidth / 2;

    // 限制滑动范围在0到maxPosition之间
    this.currentPosition = Math.max(0, Math.min(newPosition, this.maxPosition));

    // 判断是否滑到末端（留2px误差避免边界判断问题）
    if (this.currentPosition >= this.maxPosition - 2) {
      this.completeSlide();
    }
  }

  @HostListener('document:mouseup')
  @HostListener('document:mouseleave')
  @HostListener('document:touchend')
  onSlideEnd(): void {
    if (!this.isCompleted) {
      // 未滑到末端，重置手柄位置
      this.currentPosition = 0;
    }
    this.isSliding = false;
  }

  private completeSlide(): void {
    this.isCompleted = true;
    this.currentPosition = this.maxPosition;
    // 触发自定义回调函数
    this.onSlideComplete?.();
  }
}

2. 组件使用示例 #

在父组件模板中引入组件：

<app-slide-button (onSlideComplete)="handleSlideSuccess()"></app-slide-button>

父组件TS文件中定义回调逻辑：

handleSlideSuccess(): void {
  console.log('滑动验证完成，执行后续操作');
  // 这里写你需要执行的业务逻辑，比如提交表单、跳转页面等
}

关键功能说明 #

• 适配桌面端鼠标拖动和移动端触摸滑动
• 滑动过程中实时限制手柄在容器范围内移动
• 滑至末端自动锁定状态并触发传入的回调函数
• 未完成滑动时松开操作，手柄自动重置到初始位置

内容的提问来源于stack exchange，提问作者kiku