vue 字典自定义颜色

问题说明

ruoyi的前端提供的字典样式只有默认的那几个蓝色，红色，但我们的车牌颜色有各种颜色，因此需要自定义字典的回显方案

解决方案

表单

增加class="custom-dict-tag"防止影响其他的字典

 <el-table-column label="车牌颜色，0-蓝色；1-绿色；2-黑色；3-黄色；4-其他" align="center" prop="plateColor" >
  <template slot-scope="scope">
    <dict-tag class="custom-dict-tag"
      :options="dict.type.plate_color"
      :value="scope.row.plateColor"
      :style="getTagStyle(scope.row.plateColor)"
    />
  </template>
</el-table-column>

自定义方法

getTagStyle(plateColor) {
  let color;
  switch (plateColor) {
    case "0":
      color = '#0000FF'; // 蓝色
      break;
    case "1":
      color = '#008000'; // 绿色
      break;
    case "2":
      color = '#000000'; // 黑色
      break;
    case "3":
      color = '#FFFF00'; // 黄色
      break;
    default:
      color = '#808080'; // 其他
  }
  return {
    '--custom-background-color': color,
    '--custom-color': '#FFFFFF'
  };
}

强制样式

字典生成的样式是div >span 所以需要::v-deep深度选择

<style scoped>
	.custom-dict-tag ::v-deep .el-tag {
	  background-color: var(--custom-background-color) !important;
	  color: var(--custom-color) !important;
	}
	
	.custom-dict-tag ::v-deep .el-tag--light {
	  background-color: var(--custom-background-color) !important;
	  color: var(--custom-color) !important;
	}
	
	.custom-dict-tag ::v-deep .el-tag:hover {
	  background-color: var(--custom-background-color) !important;
	  color: var(--custom-color) !important;
	  opacity: 1 !important; /* 确保 hover 时透明度不变 */
	}
</style>

::v-deep解释说明

1. ::v-deep
   作用：::v-deep 是 Vue 中的深度选择器，用于深度作用到子组件的内部元素。它可以使样式规则应用到当前组件内的所有后代元素，不论它们位于组件的哪个层级。
   背景：在 Vue 2 中，常用的深度选择器是 /deep/ 或 >>>。在 Vue 3 中，这些选择器被 ::v-deep 取代。
2. .el-tag
   作用：.el-tag 是 Element UI 中 el-tag 组件的类选择器，表示样式规则将应用于所有具有 el-tag 类的元素。
3. background-color: var(–custom-background-color) !important;
   作用：将 el-tag 组件的背景颜色设置为 CSS 自定义属性 --custom-background-color 的值。
   var(–custom-background-color)：使用 CSS 变量 --custom-background-color 的值。这些变量是在父级元素或通过 JavaScript 动态设置的。
   !important：强制应用此样式，即使有更高优先级的样式规则也会被覆盖。
4. color: var(–custom-color) !important;
   作用：将 el-tag 组件的文本颜色设置为 CSS 自定义属性 --custom-color 的值。
   var(–custom-color)：使用 CSS 变量 --custom-color 的值。
   !important：强制应用此样式，即使有更高优先级的样式规则也会被覆盖。

总结：这段代码的目的是确保在当前组件中，所有 el-tag 组件的背景颜色和文本颜色都使用 CSS 自定义属性 --custom-background-color 和 --custom-color 的值，并使用 !important 来覆盖任何默认样式或其他更高优先级的样式。这通过使用 ::v-
deep 深度选择器，可以确保这些样式即使在深层嵌套的子组件中也能生效。

最后发现ruoyi的字典提供了自定义样式选项，乌龙了哈哈哈哈，就当学习一下吧