需求说明
- 通过点击
日
周
月
控制当前点击的项的样式,实现动态控制样式的效果
方法说明
- 将三个按钮设置为一个数组,通过
v-for
遍历展示,在每个item
添加点击事件selectCycle
,保留当前点击的索引值为currentCycle
,通过currentCycle === index
判断设置行内样式,设置当前点击的item
的样式为'background: rgba(24, 144, 255, 0.2);color: #1890FF;'
代码说明
//html
<template>
<div class="cycle">
<div
v-for="(item, index) in cycleList"
:key="index"
class="day"
:style="
currentCycle === index
? 'background: rgba(24, 144, 255, 0.2);color: #1890FF;'
: ''
"
@click="selectCycle(index)"
>
{{ item.name }}
</div>
</div>
</template>
//javascript
<script>
export default {
name: 'cycleSelect',
data() {
return {
// 周期选择
cycleList: [
{ class: 'day', name: '日' },
{ class: 'week', name: '周' },
{ class: 'month', name: '月' }
],
currentCycle: 0
}
},
methods: {
// 选择周期(日、周、月)
selectCycle(val) {
this.currentCycle = val
}
}
}
</script>
//css
<style lang="scss" scoped>
.cycle {
display: flex;
}
//基础样式
.cycle > div {
width: 34px;
height: 26px;
border-radius: 4px;
background: rgba($color: #cccccc, $alpha: 0.2);
margin-right: 8px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
写在最后
记录使用到的一些方法,避免忘记,若有不足之处请多多指教