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

Question

我正在尝试使用 vuejs cookbook 提出的系统来保存 svg 图标 ( https://v2.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"
       :width="width"
       :height="height"
       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"
               width="20"
               height="20"
               icon-color="#949494">
      <icon-arrow-up/>
    </icon-base>
  </div>
</template>

如何在悬停时更改图标的颜色？不过，我想保持 IconArrowUp 组件干净，这样如果我需要，我可以在不改变颜色的情况下使用它

Answer 1

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

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

demo 1

否则，如果悬停颜色是动态的，您将使用 JavaScript。你可以制作 fill以基于 mouseover 变化的本地 bool 值为条件/mouseout事件:

1. 在 IconBase.vue ，定义一个本地数据变量(例如，名为 isHover )来跟踪悬停状态，以及一个 prop在悬停状态下设置颜色:

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

1. 编辑 IconBase.vue制作的模板 fill有条件的 isHover , 并设置 isHover基于 SVG 容器的 mouseover/mouseout事件:

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

1. 要设置颜色过渡，请使用 transition 应用于 <g> 的类的 CSS 属性:

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

1. 在 ScrollToTop.vue , 编辑 IconBase 的用法设置悬停颜色:

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

demo 2