saber/src/views/formula/component/formulaItem.vue

<template>
  <span :class="getItemClass(item)" @click="itemClick(item)">
    {{item.name}}
    
  </span>
  
</template>

<script>
export default {
  name: "formulaItem",
  props: {
    item: {
      type: Object,
      default: function () {
        return {};
      }
    },
   
  },
  data(){
    return{

    }
  },
  methods:{
    itemClick(item){
      item.selected = !item.selected;
      this.$emit('click',{
        selected:item.selected,
        item
      })
    },
    getItemClass(item){
      let obj = {};
      // obj[item.type.toLocaleLowerCase()+'-class']=true;
      obj['element-class']=true;
      if(item.selected){
        obj.selected = true;
      }
      return obj;
    }
  }
}
</script>
<style scoped lang="scss">
  .element-class{
    cursor: pointer;
    padding: 0 3px;
    &.selected{
      color: rgba(64,149,229,1);
    }
  }
  .text-blue{
    font-size: 20px;
    color: rgba(64,149,229,1);
    font-weight:bold;
  }
</style>