在 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 函数中用作正则表达式替换的 span 中的颜色属性

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

感谢所有建议

仅供参考——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 类。

.department1{
color:#ff
}

然后检索该员工的部门并将其传递给类属性。

如果没有实际数据，我可以说在

中查找部门值

this.pubmedData[index]["publication"][department] // Exemple

然后用那个改变类属性。

 return  '<span  class="'+ department +'"><b>' + match + '</b></span>';