vue切换两个按钮时背景样式呈现平移的效果
时间: 2023-11-19 21:04:58 浏览: 115
你可以使用Vue的动态绑定class来实现按钮背景样式平移的效果。首先,为每个按钮定义一个class,并设置不同的背景样式。然后,在Vue组件中,定义一个data属性来记录当前选中的按钮的索引值。通过动态绑定class,根据当前选中的按钮的索引值,为选中的按钮添加一个active类,并根据索引值计算出需要平移的距离,设置样式transform。
以下是示例代码:
```html
<template>
<div class="button-group">
<button v-for="(button, index) in buttons" :key="index" :class="{ active: currentIndex === index }" @click="setCurrentIndex(index)">
{{ button.text }}
</button>
<div class="indicator" :style="{ transform: 'translateX(' + currentIndex * 100 + '%)' }"></div>
</div>
</template>
<script>
export default {
data() {
return {
buttons: [
{ text: '按钮1', background: '#f00' },
{ text: '按钮2', background: '#0f0' },
],
currentIndex: 0,
}
},
methods: {
setCurrentIndex(index) {
this.currentIndex = index
},
},
}
</script>
<style>
.button-group {
position: relative;
}
button {
display: inline-block;
padding: 10px;
background: #ccc;
border: none;
outline: none;
font-size: 16px;
cursor: pointer;
}
button.active {
background-color: #fff;
}
.indicator {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background-color: #000;
transition: transform 0.3s ease-in-out;
}
</style>
```
在上面的代码中,我们为每个按钮定义了一个active类,并在组件中定义了一个currentIndex属性来记录当前选中的按钮的索引值。在按钮被点击时,通过setCurrentIndex方法来更新currentIndex的值。同时,在指示器元素上,我们使用transform样式来设置平移效果,根据currentIndex的值计算出需要平移的距离,设置样式transform。
阅读全文