当前位置：首页 > VUE

vue实现弓型结构

2026-01-22 19:08:03VUE

Vue 实现弓型结构

弓型结构通常指一种对称的弧形布局，常见于菜单、导航或数据可视化场景。以下提供两种实现方式：

使用 CSS Flexbox 和 Transform

<template>
  <div class="arc-container">
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      class="arc-item"
      :style="getItemStyle(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      radius: 150,
      angleStep: 30
    }
  },
  methods: {
    getItemStyle(index) {
      const angle = (index - Math.floor(this.items.length / 2)) * this.angleStep
      const rad = angle * Math.PI / 180
      return {
        transform: `
          rotate(${angle}deg) 
          translate(${this.radius}px) 
          rotate(${-angle}deg)
        `
      }
    }
  }
}
</script>

<style>
.arc-container {
  display: flex;
  justify-content: center;
  position: relative;
  height: 300px;
}
.arc-item {
  position: absolute;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #42b983;
  color: white;
  border-radius: 50%;
}
</style>

使用 SVG 实现精确弧形

<template>
  <svg width="400" height="300" viewBox="0 0 400 300">
    <path 
      d="M100,150 A150,150 0 0 1 300,150" 
      fill="none" 
      stroke="#ccc" 
      stroke-width="2"
    />
    <circle 
      v-for="(item, index) in items" 
      :key="index"
      :cx="getX(index)"
      :cy="getY(index)"
      r="20"
      fill="#42b983"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      items: ['A', 'B', 'C', 'D', 'E'],
      centerX: 200,
      centerY: 150,
      radius: 150,
      startAngle: -60,
      endAngle: 60
    }
  },
  methods: {
    getX(index) {
      const angle = this.startAngle + 
        (index * (this.endAngle - this.startAngle) / (this.items.length - 1))
      return this.centerX + this.radius * Math.cos(angle * Math.PI / 180)
    },
    getY(index) {
      const angle = this.startAngle + 
        (index * (this.endAngle - this.startAngle) / (this.items.length - 1))
      return this.centerY - this.radius * Math.sin(angle * Math.PI / 180)
    }
  }
}
</script>