client-mazu/src/components/GlobalComponents/ScenicCheckTag.vue

<template>
  <div>
    <el-tooltip
      v-for="(item,index) in list"
      :key="index"
      :content="item.name"
      placement="top"
      effect="dark">
      <span
        class="stag"
        :class="{checked:selected.some(i=>i===item.id)}"
        :style="getStyle(item,index)"
        @click="handleClick(item)"
      >
        {{ item.name[0] }}
      </span>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  computed: {
    list () {
      return this.$store.state.app.scenicList
    },
    scenicColor () {
      return this.$store.state.app.scenicColor
    }
  },
  data () {
    return {
      selected: []
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick (item) {
      let index = this.selected.findIndex(i => i === item.id)

      if (index > -1) {
        this.selected.splice(index, 1)
      } else {
        this.selected.push(item.id)
      }

      this.$emit('input', this.selected)
      this.$emit('change', this.selected)
    },
    getStyle (item, index) {
      let isChecked = this.selected.some(i => i === item.id)

      if (isChecked) {
        return {
          borderColor: this.scenicColor[item.id],
          background: this.scenicColor[item.id],
          color: '#fff'
        }
      } else {
        return {
          borderColor: '#999',
          color: '#999'
        }
      }
    }
  },
  watch: {
    value: {
      handler (val) {
        this.selected = JSON.parse(JSON.stringify(val))
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.stag {
  display: inline-block; padding: 2px; margin-bottom: 3px; line-height: 14px; cursor: pointer;  border: 1px solid transparent;border-radius: 3px;
}
.stag {
  margin-right: 3px;
}

</style>