如何更改 vuejs 食谱中可编辑 Svg 图标系统中图标的颜色？

Posted 2023-02-22

【中文标题】如何更改 vuejs 食谱中可编辑 Svg 图标系统中图标的颜色？

【英文标题】：How to change color of icon in Editable Svg Icons system in vuejs cookbook?

【发布时间】：2019-04-27 15:16:37

【问题描述】：

我正在尝试使用 vuejs cookbook 提出的系统来保存 svg 图标 (https://vuejs.org/v2/cookbook/editable-svg-icons.html)

所以我有 2 个组件：IconBase 和 IconArrowUp。我需要更改悬停时箭头图标的颜色（也应应用 css 过渡）。

在文章中他们有iconColor 属性。但是我没有设法使用css改变颜色，使用onmouseenter之类的事件也不是很方便。

这是两个组件的代码：

IconBase.vue：

<template>
  <svg xmlns="http://www.w3.org/2000/svg"
       :
       :
       viewBox="0 0 100 100"
       role="presentation"
       @click="$emit('click')">
    <g :fill="iconColor">
      <slot />
    </g>
  </svg>
</template>

<script>
  export default 
    props: 
      width: 
        type: [Number, String],
        default: 18
      ,
      height: 
        type: [Number, String],
        default: 18
      ,
      iconColor: 
        type: String,
        default: 'currentColor'
      
    
  
</script>

和 IconArrowUp.vue:

<template>
  <path d="m12.398 40.102 13.402 13.5 14.699-14.801v58.699h19v-58.699l14.699 14.801 13.402-13.5-37.602-37.602z"/>
</template>

这就是我使用它们的方式（另一个组件 ScrollToTop.vue）：

<template>
  <div class="scroll-to-top">
    <icon-base class="icon-arrow-up"
               
               
               icon-color="#949494">
      <icon-arrow-up/>
    </icon-base>
  </div>
</template>

如何在悬停时更改图标的颜色？不过，我想保持IconArrowUp 组件的清洁，以便在需要时使用它而无需更改颜色

【参考方案1】：

如果悬停颜色始终相同，您可以简单地使用:hover psuedo-class。例如，当 SVG 容器悬停时，此 CSS 使图标变为蓝色，并且过渡需要 400 毫秒：

<style scoped>
  /* <g class="icon" ...> */
  .icon 
    transition: fill .4s ease;
  
  svg:hover .icon 
    fill: blue;
  
</style>

demo 1

否则，如果悬停颜色是动态的，您将使用 javascript。您可以使 fill 以本地布尔值为条件，该布尔值根据 mouseover/mouseout 事件发生变化：

在IconBase.vue 中，定义一个本地数据变量（例如，名为isHover）来跟踪悬停状态，并定义一个prop 来设置悬停状态期间的颜色：

props: [
  // ...
  iconHoverColor: 
    type: String,
    default: "currentColor"
  
],
data() 
  return 
    isHover: false
  

编辑IconBase.vue 的模板以使fill 以isHover 为条件，并根据SVG 容器的mouseover/mouseout 事件设置isHover：

<svg @mouseover="isHover=true" @mouseout="isHover=false">
  <g :fill="isHover ? iconHoverColor : iconColor">

要设置颜色过渡，请在应用于<g> 的类上使用transition CSS 属性：

<style scoped>
  /* <g class="icon" ...> */
  .icon 
    transition: fill .4s ease;
  
</style>

在ScrollToTop.vue中，编辑IconBase的用法以设置悬停颜色：

<icon-base icon-hover-color="#ff0000" ...>

demo 2