vue实现弓型结构
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>关键参数说明
radius控制弓形的弯曲程度angleStep或startAngle/endAngle控制元素分布范围- 三角函数计算确保元素沿弧线均匀分布
- SVG 版本适合需要精确控制路径的场景
两种方式均可通过调整参数实现不同曲率的弓形布局，Flexbox 方案更适合简单UI元素，SVG方案更适合需要复杂路径的场景。
