AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/components/SubOperators/Spectra.vue

<template>
  <div class="spectra">
    <div
      :class="'spectra-item' + (item.value == innerValue ? ' active' : '')"
      v-for="(item, index) in list"
      :key="index"
      @click="handleClick(item)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
const list = [
  {
    title: 'Sample Data',
    value: 'sample'
  },
  {
    title: 'GasBg Data',
    value: 'gasBg'
  },
  {
    title: 'DetBg Data',
    value: 'detBg'
  },
  {
    title: 'QC Data',
    value: 'qc'
  }
]
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    this.list = list
    return {}
  },
  methods: {
    handleClick(item) {
      this.innerValue = item.value
    }
  },
  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>