<template>
|
<div class="choiceDiv">
|
<div class="lable">{{choiceData.lable}}：</div>
|
<div class="choiceCon">
|
<div class="choiceList" v-for="(item,index) in choiceData.choicceArr" :key="index"
|
:class="{active:activeIndex==index}" @click="changeChoice(index)"
|
:style="{backgroundColor:activeColor(index)}">
|
<div class="tips" :style="{borderColor:activeColor(index)}">
|
{{item}}
|
<span class="tipsEnd" :style="{borderTopColor:activeColor(index)}"></span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: ["choiceData"],
|
data() {
|
return {
|
activeIndex: 0
|
}
|
},
|
methods: {
|
activeColor(index) {
|
if (this.activeIndex == index) {
|
return this.choiceData.activeColor
|
}
|
},
|
changeChoice(index) {
|
this.activeIndex = index;
|
this.$emit("active", this.choiceData.choicceArr[this.activeIndex]);
|
}
|
},
|
mounted() {
|
this.activeIndex = this.choiceData.choicceArr.indexOf(this.choiceData.active)
|
},
|
}
|
</script>
|
|
<style scoped>
|
.choiceDiv {
|
padding: 2px 0;
|
border: 1px solid #5b64cb;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.lable {
|
padding-left: 8px;
|
color: #57f8ff;
|
font-size: 12px;
|
margin-right: 8px;
|
}
|
|
.choiceCon {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.choiceList {
|
background-color: #5282ee;
|
width: 22px;
|
height: 24px;
|
margin: 0 4px;
|
cursor: pointer;
|
position: relative;
|
}
|
|
.tips {
|
position: absolute;
|
top: -50px;
|
left: -50%;
|
width: 42px;
|
height: 42px;
|
background-color: #57f8ff;
|
color: #1f3065;
|
font-size: 12px;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 2px solid #ffe329;
|
display: none;
|
transition: 0.3s;
|
}
|
|
.tips .tipsEnd {
|
display: block;
|
width: 0;
|
height: 0;
|
border-left: 4px solid transparent;
|
border-right: 4px solid transparent;
|
border-top: 12px solid #ffe329;
|
position: absolute;
|
left: 15px;
|
bottom: -13px;
|
}
|
|
.active .tips {
|
display: flex;
|
}
|
</style>
|
