HighlightContent.vue

<template>
  <div @click="handleClick" :id="id" :class="{'c-highlight-content': true, 'highlight': highlight, 'change-light': highlightChanges}">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['id', 'path'],
  data: function () {
    return {
      // process: '0'
      process: '1'
    }
  },
  computed: {
    showHighlight: {
      get () {
        // return this.process == '1' || this.process == '2'
        return this.$route.path.startsWith("/review")
      }
    },
    highlight () {
      return this.$store.state.Status.highlights.indexOf(this.id) !== -1 && this.showHighlight
    },
    highlightChanges () {
      let flag = false
      this.$store.state.Status.highlightChanges.forEach(item => {
        if (item == this.path || item.indexOf(this.path) == 0) {
          flag = true
        }
      })
      return flag
    }
  },
  created: function () {
    if (this.$route.query.routeParams) {
      this.process = this.$route.query.routeParams.process;
      // this.busiTempInfoSriNo = this.$route.query.routeParams.busiTempInfoSriNo;
    }
    // this.process = '1'
  },
  methods: {
    handleClick: function () {
      if (this.showHighlight) {
        this.updateHighlights(this.id)
      }
    },
    updateHighlights(id) {
      let list = this.$store.state.Status.highlights;
      if (list.indexOf(id) == -1) {
        list.push(id)
        this.$store.commit('updateRemark', id)
      } else {
        let index = list.indexOf(id)
        list.splice(index, 1)
      }
      this.$store.commit('setHighlights', list)
    },
  }
}
</script>
<style>
.c-highlight-content {
  /* overflow: hidden; */
  border: 1px solid rgba(0,0,0,0);
  border-radius: 5px;
  margin: -1px;
}
.c-highlight-content.change-light {
  border: 1px solid rgb(201, 171, 1);
}
.c-highlight-content.highlight {
  border: 1px solid red;
}

</style>