使用Vue.js应用程序中的JavaScript更改跨度中的文本颜色

Question

我需要根据指定部门的外部值来更改跨度中的文本颜色。我有一个应用程序，公司可以在该应用程序中向分配了人员的部门上载员工花名册，并且我想对同一部门中的所有员工进行颜色编码。在上传电子表格之前，我不知道部门名称是什么，并且颜色之间没有关系，只要部门之间的颜色不同且一致即可。我将颜色添加为课程。但目前不将其用作类

       .kelly-vivid-yellow { color: #FFB300; }
       .kelly-strong-purple { color: #803E75; }
       .kelly-vivid-orange { color: #FF6800; }
       .kelly-very-light-blue { color: #A6BDD7; }
       .kelly-vivid-red { color: #C10020; }
       .kelly-grayish-yellow { color: #CEA262; }
       .kelly-medium-gray { color: #817066; }  
        plus others.

部门名称可能是；

      Admin
      Grounds
      Management
      Staff
      etc

或

    Department One
    Department Two
    Department Three
    etc

或其他

我正在考虑将所有颜色添加到数组中，例如

    kellyColors = ["#FFB300;","#803E75;","#FF6800;","#A6BDD7;" etc]

并为部门分配颜色。我打算将所有部门添加到数组中，然后根据数组中的位置为其分配颜色。

       departments = ["Admin","Grounds","Management","Staff"]

       let Admin = kellyColor[0];    // Admin position in array is 0
       let Grounds = kellyColor[1];  // Grounds position in array is 1
        etc

但是我不知道如何在我用作JavaScript函数中的正则表达式替换的范围内更改color属性

             this.pubmedData[index]["publication"] = this.pubmedData[index] 
             ["publication"].replace(new RegExp(Employee_Name), match => {
              return  '<span  style="color:#803E75;"><b>' + match + '</b></span>';             
              });

感谢所有建议

FYI-- this.pubmedData [index] [“ publication”]是一个数组，用于保存需要更改员工姓名颜色的信息。它可能是这样的：

       John Smith and Bob Jones had Friday off.

而且我需要对员工姓名进行颜色编码以显示他们在同一部门还是在不同部门

Answer 1

恕我直言，最基本的方法是使用HSL color model来动态生成N种颜色并均匀地隔开它们。

考虑到色相可以从0到360度（但是0和360当然是相同的色相，那么每个部门都可以使用其色度计算为]的颜色>

departmentIndex * 360/ departmentsLength 
因此，如果有两个部门，则您的色相将为0，色相为180。如果您有三个，则将具有色调0、120和240，依此类推。 

（（您将departmentsLength合并为默认值1，以避免被零除）。

一个非常基本的示例

，使用60％的饱和度和40％的亮度，如下所示：

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        departments: ['sales', 'marketing'],
        newDepartmentName: '',

      }
    },
    methods: {
      addDepartment() {
        if (this.newDepartmentName) {
          this.departments.push(this.newDepartmentName);
        }
        this.newDepartmentName = '';
      },
      colorStyle(deptIndex) {
        return `color:hsl(${this.hueStep*deptIndex} ,60%,40%);`;
      }
    },
    computed: {
      hueStep() {
        return 360 / (this.departments.length || 1);
      },

      filtrar: function() {
        return this.tarimas.filter(
          tarima => String(tarima.trabajo)
          .includes(this.filtrarTarima)
        );
      }
    }
  });

};
#app {
  padding: 0.5em;
}

#app>div {
  margin: 0.2em;
  border:0.5px solid #eee;
}
#app>div b {
  float:left;
  min-width:60%;
}

#app input {
  border-radius: 3px;
  margin: 0.2em 0;
  padding: 0.4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="newDepartmentName">
  <button v-on:click='addDepartment'>add Department</button>
  <div v-for="(department,index) of departments" :key="index" :style="colorStyle(index)">
    <b>{{ department}}'s style</b> <small>{{colorStyle(index)}}</small>
  </div>
</div>

使用输入字段和按钮来添加其他部门，例如人力资源或会计。每个其他部门都会影响整个数组的计算颜色，但第一个部门将保持为零。

如果您想要一个更精致的示例，则可以使用颜色生成器（例如Colorbrewer，d3 diverging scales）来向组件添加一些交互和自定义，但是我认为这不在此问题的范围之内。

Answer 2

我只将部门名称用作简单的CSS类。