动态传css样式

zhuohaiyy

已于 2022-05-17 17:54:45 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签： javascript 前端 css3

于 2022-04-19 21:17:09 首次发布

本文链接：https://blog.youkuaiyun.com/zhuohaiyy/article/details/124283711

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在前端开发中使用mtd-tag组件和CSS样式来实现动态颜色管理，涉及了模板遍历、图标定位和条件样式设置。方法一是通过自定义函数`getColor`控制边框和文字颜色；方法二是利用CSS变量调整图标位置；方法三是根据报告类型选择不同背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

支持以下三种方式

//方法一：
<template #default="scope">
      <mtd-tag 
      v-for="item in scope.row.customLabelVo"
      :key="item.id"
      :style="getColor(item.color)"          >
      <div  :style="getColor(item.color)">{{ item.name }}</div></mtd-tag>
</template>
method：
 getColor(val){
  var value = "border-color:"+val+";"+"color:"+val
  return value
}
//方法二：
<i class="mtdicon mtdicon-check" :style="{ '--font-left': curColor }"></i>
.mtdicon-check {
  position: absolute;
  top: 10px;
  left: var(--font-left);
}
//方法三
<i class="mtdicon mtdicon-check":style="{'border-color': reportType === '1' ? '#0A70F5':'',height:'148px'}"></i>
.mtdicon-check {
  position: absolute;
  top: 10px;
  left: var(--font-left);
}