Question

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

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

在文章中，它们具有exclude属性。但是我没有设法使用css更改颜色，并且使用诸如onmouseenter之类的事件并不方便。

这是两个部分的代码：

IconBase.vue：

iconColor

和IconArrowUp.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>

这就是我使用它们的方式（另一个组件ScrollToTop.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>

如何在悬停时更改图标的颜色？我想保持<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>组件的清洁，以便在需要时使用它而不会改变颜色

Answer 1

如果悬停颜色始终相同，则可以简单地使用:hover伪类。例如，当SVG容器悬停时，此CSS将图标变为蓝色，并且转换过程需要400ms：

<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容器的isHover / mouseover设置mouseout事件：

<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

如何在vuejs食谱的Editable Svg Icons系统中更改图标的颜色？

1 个答案: