小技巧系列 -- 如何实现类似 Radio 的效果

需求

有五个图标，初始时只能有一个“亮着”，控制鼠标可以“点亮”，但同时只能一个“亮着”

• 实现目标：

步骤

这里只是另外写的基于 vue 的 demo，主要是想表达其中的实现思路，剩余代码需要大家根据各自的需求进行补充

1. 画出图标

<img v-for="item in list" class="icon" :src="..." />

.icon{
    color: gray;
}

charts: ['chartA','chartB','chartC','chartD','chartE']

效果：

2. 绘制出点亮之后的效果

.icon-active{
    color: #3c4fe0;
}

效果：

3. 绑定点击事件

<img v-for="item in list" class="icon" @click="chartTypeChange(item)" :src="..." />

chartChoosed: 'chartA', // 当前选中项
charts: ['chartA','chartB','chartC','chartD','chartE']
chartTypeChange(choose){ // 点击事件
    console.log(choose)
}

效果：

4. 绑定当前活跃项并渲染其样式

<img 
    v-for="item in list"
    :src="..."
    :class="chartChoosed === item ? 'icon-active' : 'icon'"
    @click="chartTypeChange(item)" 
/>

这里注意的是：

• 属性名称 = "不变的属性值"
• : + 属性名称 = "会变化的属性值"（是v-bind:属性名称的缩写）

chartChoosed: 'chartA', // 当前选中项
charts: ['chartA','chartB','chartC','chartD','chartE']
chartTypeChange(choose){ // 点击事件
    this.chartChoosed = choose
}

效果：

至此已完成