vuejs 요리책의 편집 가능한 Svg 아이콘 시스템에서 아이콘 색상을 변경하는 방법

vuejs 요리책의 편집 가능한 Svg 아이콘 시스템에서 아이콘 색상을 변경하는 방법

vuejs cookbook에서 제안한 시스템을 svg 아이콘을 보관하기 위해 사용하려고 합니다(https://vuejs.org/v2/cookbook/editable-svg-icons.html)

2개의 컴포넌트가 있습니다.IconBase 및 IconArrowUp.호버에 있는 화살표 아이콘의 색상을 변경해야 합니다(CSS 전환도 적용되어야 합니다.

기사에서 그들은 다음과 같은 내용이 있습니다.iconColor소유물.그러나 css를 사용하여 색상을 변경할 수 없었고, onmouseenter와 같은 이벤트를 사용하는 것은 그다지 편리하지 않습니다.

다음은 두 가지 컴포넌트의 코드입니다.

아이콘 베이스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>

그리고 아이콘 화살표 업.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컴포넌트는 깨끗하기 때문에 필요에 따라 색상 변경 없이 사용할 수 있습니다.

호버 색상이 항상 같다면 psuedo 클래스를 사용할 수 있습니다.예를 들어, 이 CSS는 SVG 컨테이너가 정지하고 있을 때 아이콘을 파란색으로 하여 이행에 400밀리초가 걸립니다.

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

데모 1

그렇지 않으면 호버 색상이 동적일 경우 JavaScript를 사용합니다.당신은 할 수 있다.fill에 따라 변경되는 로컬 부울에 따라 조건부mouseover/mouseout이벤트:

1. 인IconBase.vue로컬 데이터 변수(예: 이름 지정)를 정의합니다.isHover)를 사용하여 호버 상태를 추적하고,prop호버 상태 동안 색상을 설정하려면:

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

2. 편집IconBase.vue작성하는 템플릿fill을 조건으로 하는.isHover, 및 설정isHoverSVG 컨테이너에 기반하여mouseover/mouseout이벤트:

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

3. 색상 천이를 설정하려면 다음 항목에 적용된 클래스의 CSS 속성을 사용합니다.<g>:

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

4. 인ScrollToTop.vue, 의 사용법을 편집합니다.IconBase호버 색상을 설정하려면:

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

데모 2

언급URL : https://stackoverflow.com/questions/53473292/how-to-change-color-of-icon-in-editable-svg-icons-system-in-vuejs-cookbook