当前位置：首页 > VUE

vue实现弧形选择

2026-03-08 10:38:06VUE

Vue 实现弧形选择器

弧形选择器通常用于视觉化选择场景，如时间选择、角度选择等。以下是基于 Vue 的实现方法：

基本思路

通过 SVG 或 Canvas 绘制弧形轨道，结合触摸/鼠标事件实现交互。Vue 负责数据绑定和状态管理。

实现步骤

1. 绘制弧形轨道 使用 SVG 的 <path> 元素绘制弧形：

vue实现弧形选择

<template>
  <svg width="300" height="300" viewBox="0 0 300 300">
    <path 
      d="M50,150 A100,100 0 0 1 250,150"
      fill="none"
      stroke="#eee"
      stroke-width="10"
    />
  </svg>
</template>

2. 添加可拖动控制点 在弧形上添加圆形控制点：

<circle 
  cx="150" 
  cy="50" 
  r="15" 
  fill="#42b983"
  @mousedown="startDrag"
  @touchstart="startDrag"
/>

3. 实现拖动逻辑 计算角度并更新控制点位置：

vue实现弧形选择

methods: {
  startDrag(e) {
    this.dragging = true
    document.addEventListener('mousemove', this.drag)
    document.addEventListener('mouseup', this.stopDrag)
    // 同理添加 touch 事件
  },

  drag(e) {
    if (!this.dragging) return
    const rect = this.$el.getBoundingClientRect()
    const x = e.clientX - rect.left - 150
    const y = e.clientY - rect.top - 150
    let angle = Math.atan2(y, x) * 180 / Math.PI

    // 限制角度范围（示例为90°-270°）
    angle = Math.max(90, Math.min(270, angle))
    this.currentAngle = angle

    // 更新位置
    const rad = (angle - 90) * Math.PI / 180
    this.controlX = 150 + 100 * Math.cos(rad)
    this.controlY = 150 + 100 * Math.sin(rad)
  },

  stopDrag() {
    this.dragging = false
    // 移除事件监听
  }
}

4. 添加刻度标记 在弧形周围添加刻度：

<g v-for="(tick, i) in ticks" :key="i">
  <line 
    :x1="tick.x1" 
    :y1="tick.y1" 
    :x2="tick.x2" 
    :y2="tick.y2" 
    stroke="#999" 
    stroke-width="2"
  />
  <text 
    :x="tick.textX" 
    :y="tick.textY" 
    text-anchor="middle"
    font-size="12"
  >
    {{ tick.value }}
  </text>
</g>

5. 响应式数据绑定 将选择值绑定到 Vue 数据：

data() {
  return {
    currentAngle: 180,
    controlX: 150,
    controlY: 50,
    minAngle: 90,
    maxAngle: 270,
    valueRange: [0, 100]
  }
},
computed: {
  currentValue() {
    const ratio = (this.currentAngle - this.minAngle) / 
                 (this.maxAngle - this.minAngle)
    return Math.round(
      this.valueRange[0] + 
      ratio * (this.valueRange[1] - this.valueRange[0])
    )
  }
}