如何更改 vuejs 食譜中可編輯 Svg 圖標系統中圖標的顏色？

Question

我正在嘗試使用 vuejs 食譜提出的系統來保存 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>

演示 1

否則，如果懸停顏色是動態的，您將使用 JavaScript。 您可以根據mouseover / mouseout事件更改的本地布爾值進行fill ：

1. 在IconBase.vue中，定義一個本地數據變量（例如，名為isHover ）來跟蹤懸停狀態，並定義一個prop來設置懸停狀態期間的顏色：

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

2. 編輯IconBase.vue的模板，使fill以isHover為條件，並根據 SVG 容器的mouseover / mouseout事件設置isHover ：

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

3. 要設置顏色過渡，請在應用於<g>的類上使用transition CSS 屬性：

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

4. 在ScrollToTop.vue中，編輯IconBase的用法以設置懸停顏色：

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

演示 2