vue怎么把按钮弄成时间轴形式
时间: 2024-05-02 12:21:02 浏览: 18
Vue中可以使用v-for指令和transition动画来实现按钮时间轴的效果。
首先,需要在Vue组件中定义一个数组来存储按钮的文本和状态:
```
data() {
return {
buttons: [
{text: 'Step 1', active: true},
{text: 'Step 2', active: false},
{text: 'Step 3', active: false},
{text: 'Step 4', active: false},
]
}
}
```
然后,在模板中使用v-for指令来渲染按钮:
```
<div class="timeline">
<div class="timeline-item" v-for="(button, index) in buttons" :key="index">
<button :class="{active: button.active}">{{button.text}}</button>
<div class="timeline-dot"></div>
</div>
</div>
```
其中,class绑定用来设置按钮的激活状态,timeline-dot用来渲染时间轴上的小圆点。
接下来,我们需要为按钮添加点击事件,以实现按钮的状态切换:
```
methods: {
setActive(index) {
this.buttons.forEach((button, i) => {
button.active = i === index
})
}
}
```
最后,我们可以使用transition动画来实现按钮切换时的过渡效果:
```
<transition name="fade">
<div class="timeline-dot" v-if="button.active"></div>
</transition>
```
完整的代码如下:
```
<template>
<div class="timeline">
<div class="timeline-item" v-for="(button, index) in buttons" :key="index">
<button :class="{active: button.active}" @click="setActive(index)">{{button.text}}</button>
<transition name="fade">
<div class="timeline-dot" v-if="button.active"></div>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
buttons: [
{text: 'Step 1', active: true},
{text: 'Step 2', active: false},
{text: 'Step 3', active: false},
{text: 'Step 4', active: false},
]
}
},
methods: {
setActive(index) {
this.buttons.forEach((button, i) => {
button.active = i === index
})
}
}
}
</script>
<style scoped>
.timeline {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.timeline-item {
display: flex;
align-items: center;
}
button {
border: none;
background-color: transparent;
color: #555;
font-size: 18px;
cursor: pointer;
margin-right: 10px;
transition: all 0.3s ease;
}
button.active {
font-weight: bold;
color: #007aff;
}
.timeline-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin-left: 10px;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
```