75 lines
1.0 KiB
Vue
75 lines
1.0 KiB
Vue
<template>
|
|
<div class="spectra">
|
|
<div
|
|
:class="'spectra-item' + (item.title == innerValue ? ' active' : '')"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@click="handleClick(item)"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const list = [
|
|
{
|
|
title: 'Sample Data'
|
|
},
|
|
{
|
|
title: 'GasBg Data'
|
|
},
|
|
{
|
|
title: 'DetBg Data'
|
|
},
|
|
{
|
|
title: 'QC Data'
|
|
}
|
|
]
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
this.list = list
|
|
return {}
|
|
},
|
|
methods: {
|
|
handleClick(item) {
|
|
this.innerValue = item.title
|
|
}
|
|
},
|
|
computed: {
|
|
innerValue: {
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
},
|
|
get() {
|
|
return this.value
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.spectra {
|
|
width: 159px;
|
|
max-height: 200px;
|
|
overflow: auto;
|
|
|
|
&-item {
|
|
padding: 4px 14px;
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&.active {
|
|
background-color: #055565;
|
|
}
|
|
}
|
|
}
|
|
</style>
|