效果：
源码：
<template>
<div style="display:flex;width: 90%;height: 55px;margin: 50px">
<div style="font-size:5px;width:150px;display:flex;justify-self: flex-start"
v-for="(name,index) in projectList" :key="index">
<div v-if="name!=null" style="cursor:pointer;display: flex;justify-self:flex-start;padding-left: 5px ">
<div @click='changeColor(name,index)' :id="name"
class="box2" :style="{cursor:'pointer',background: colors[index],'margin-right':'3px'}">
</div>
{{ name }}
</div>
<div style="width: 3px"></div>
</div>
</div>
</template>
<script>
export default {
name: "SelectorChart",
data() {
return {
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#0000FF', '#008000', '#800080', '#FFA500',
'#00FFFF', '#808080', '#D2691E', '#8FBC8F', '#FF1493', '#00BFFF', '#FFB6C1', '#B0C4DE',
'#191970', '#6B8E23', '#BC8F8F', '#3C3C3C', '#600000', '#9F0050', '#750075', '#4B0091',
'#4F4F4F', '#750000', '#BF0060', '#930093', '#5B00AE', '#5B5B5B', '#930000', '#D9006C',
'#AE00AE', '#6F00D2', '#6C6C6C', '#AE0000'],
projectList: ['项目DD', '项目BB', '项目AA', '项目CC', '项目FF', '项目SHE']
}
},
methods: {
changeColor(name, index) {
console.log('onClick color div')
}
}
}
</script>
<style scoped>
.box2 {
width: 25px;
height: 15px;
line-height: 20px;
border-radius: 4px;
}
</style>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/101545.html
