VueJS - v-bind:스타일 + 호버

VueJS - v-bind:스타일 + 호버

VueJS v-bind:style 지시어와 함께 CSS 호버를 사용해야 하는데 관련 정보를 찾을 수 없음.

호버 스타일을 바인딩해야 하는데v-bind:style.hover={}다니다. 모든 속성은 백엔드에서 가져올 거니까 스타일을 동적으로 바인딩해야 해.

VueJS를 사용하여 마우스를 위로 올리거나 CSS 호버에서 스타일을 바인딩하는 다른 방법이 있는가?

여기 내 코드가 있다.

이것이 목적이다:

button: {
    colorBackd: '#1e2021',
    colorBackdHover: '#000000',
    text: 'Results',
    color: '#d3e0ff',
    colorHover: "#ffffff",
    borderColor: '#d3e0ff',
    borderColorHover: "#ffffff"
},

여기에 스타일과 결합해야 하는 html 요소가 있다.

<button type="button"
    :style="{
    color:button.color,
        backgroundColor:button.colorBackd,
        borderColor:button.borderColor,
    }"
    class="btn btn-outline-info large-button">

        {{ button.text }}

</button>

고마워요.

개선된 솔루션: CSS 사용자 지정 속성 및 변수 사용

현대/에버그린 브라우저로만 작업하려면 CSS 사용자 지정 속성 및 변수를 사용하는 것이 방법!실제로 CSS 사용자 지정 속성을 에 전달할 수 있음:style예: 구속력 있는

computed: {
  styleObject: function() {
    return {
      '--color': this.button.color,
      '--color-hover': this.button.colorHover
    }
  }
}

템플릿에서 다음을 수행하십시오.

<custom-button :style="styleObject" />

CSS에게 있어 그것은 단지 다음과 같은 문제일 뿐이다.

button {
  color: var(--color);
}

button:hover {
  color: var(--color-hover);
}

이 방법의 장점은 CSS 사용자 지정 속성을 적용할 수 있으므로 이러한 변수는 요소 수준에서 CSS 속성을 정의할 때에만 적용된다는 것이다.:root).

유일한 단점은 호버 상태와 회복되지 않은 상태 모두에서 모든 변수를 반복적으로 선언해야 한다는 것인데, 이것은 조금 번거로울 수 있다.그러나, 나는 이것이 CSS 변수를 사용함으로써 얻는 이익에 비해 매우 작은 단점이라고 본다.

아래 개념 증명서를 참조하십시오.

var customButton = Vue.component('custom-button', {
  template: '#custom-button',
  data() {
    return {
      button: {
        colorBackd: '#1e2021',
        colorBackdHover: '#000000',
        text: 'Results',
        color: '#d3e0ff',
        colorHover: "#ffffff",
        borderColor: '#d3e0ff',
        borderColorHover: "#ffffff"
      }
    };
  },
  computed: {
    styleObject() {
      return {
        '--button-color': this.button.color,
        '--button-background-color': this.button.colorBackd,
        '--button-border-color': this.button.borderColor,
        
        '--button-color--hover': this.button.colorHover,
        '--button-background-color--hover': this.button.colorBackdHover,
        '--button-border-color': this.button.borderColorHover
      };
    },
  },
});

new Vue({
  el: '#app'
});

button {
  color: var(--button-color);
  background-color: var(--button-background-color);
  border-color: var(--button-border-color);
}

button:hover {
  color: var(--button-color--hover);
  background-color: var(--button-background-color--hover);
  border-color: var(--button-border-color--hover);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <custom-button></custom-button>
</div>

<script type="text/template" id="custom-button">
  <button type="button" :style="styleObject" class="btn btn-outline-info large-button">
        {{ button.text }}
  </button>
</script>

원본 소트루온: JS 기반 마우스 이벤트 사용

원소의 맴버 상태를 해당 원소에 저장할 수 있다.data라고 말하다hoverState로 설정되어 있다.false기본적으로, 다음으로 전환됨true할 때@mouseenter해고되었다가 다시 로 돌아가다.false할 때@mouseleave트리거됨:

그런 다음 계산된 속성을 에 간단히 바인딩할 수 있다.style예 속성(예:styleObject. 이 안에서.styleObject에 따라 올바른 CSS 스타일을 반환할 수 있다.hoverState구성 요소 데이터에서 확인:

var customButton = Vue.component('custom-button', {
  template: '#custom-button',
  data() {
    return {
      button: {
        colorBackd: '#1e2021',
        colorBackdHover: '#000000',
        text: 'Results',
        color: '#d3e0ff',
        colorHover: "#ffffff",
        borderColor: '#d3e0ff',
        borderColorHover: "#ffffff"
      },
      hoverState: false
    };
  },
  computed: {
    styleObject() {
      var modifier = '';
      if (this.hoverState)
        modifier = 'Hover';
        
      return {
        color: this.button['color' + modifier],
        backgroundColor: this.button['colorBackd' + modifier],
        borderColor: this.button['borderColor' + modifier]
      };
    },
  },
  methods: {
    updateHoverState(isHover) {
      this.hoverState = isHover;
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <custom-button></custom-button>
</div>

<script type="text/template" id="custom-button">
  <button type="button" :style="styleObject" @mouseenter="updateHoverState(true)" @mouseleave="updateHoverState(false)" class="btn btn-outline-info large-button">
        {{ button.text }}
  </button>
</script>

다른 방법(css 변수 사용)

당신은 스타일이 있는 HTML을 만들어야 한다.

<style>
     div[vueid=${_uid}] { --btn-hover: ${`Here your hover brush`} }
</style>

그리고 당신의 부품에 주입해

<template>
   <div vueid="_uid">
      <button></button>
      <div v-html="styleCode"></div>
   </div>
</template>

그런 다음 이 변수를 정적으로만 사용하십시오.css파일로 설정 단추 스타일.

button:hover { background: var(--btn-hover); }

참고: 기본값 설명 가능:root셀렉터

Vuejs 구성 요소에 ID를 할당하고 스타일시트에 필요한 호버 스타일을 적용할 수 있다.

<button id="styledButton" type="button"
:style="{
color:button.color,
    backgroundColor:button.colorBackd,
    borderColor:button.borderColor,
}"
class="btn btn-outline-info large-button">

    {{ button.text }}
</button>

그리고 술래잡기로

<style>
styledButton:hover {
color: #FFFFFF
};
</style>

호버 스타일에 동적 데이터를 포함하려면 계산된 속성을 호출하는 태그를 만드십시오.

<style>{{computedStyle}}</style>

단일 파일 구성 요소를 사용하는 경우 단추 스타일의 범위를 다음과 같이 지정하십시오.

<template>
    <button></button>
</template>

<style scoped>
    button {
        /* your button style here */
    }
</style>

또는 좀 더 제한적인 스타일링을 위해 다음과 같은 모듈이 있다.VueJS 단일 파일 구성 요소에서 "범위 지정" 스타일을 올바르게 사용하는 방법

vue에서 이것이 구현되지 않는 것을 본 후, 나는 오버레이를 사용하기로 결정했는데, 오버레이는 불투명도를 변경하여 보여질 오버레이에 :style을 사용하는 것으로 추가된다.

기본적으로 다음과 같다.

<div id="test" :style="style">
  <div class="overlay" :style="style.hover"></div>
</div>

var testArea = Vue.component('test-area', {
  template: '<div id="test" :style="style"><div class="overlay" :style="style.hover"></div></div>',
  computed: {
    style() {
      return {
        backgroundColor: '#0f0',
        hover: {
          backgroundColor: '#f00'
        }
      };
    },
  }
});

new Vue({
  el: '#app'
});

#test {
  position: relative;
  width: 100px;
  height: 100px;
}

#test>.overlay {
  opacity: 0;
}

#test:hover>.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <test-area></test-area>
</div>

나는 hovered p 태그가 맨 위에 나타나도록 haver의 z-index를 변경하고 싶었다.그러기 위해서 나는 어떤 가치와 함께 행사를 들어야 했다.

<template>
...
<p @mouseover="changeZIndex"
   @mouseleave="changeZIndexToOriginal({$event,old_z_index})
>
...
</template>


<script>
...methods
changeZIndex(e){
    //change to new z-index
    e.target.style.zIndex = 5 //to show on top
}
changeZIndexToOriginal(e){
    //e.$event is  an event which is trirgered. to get event along with some value we have to use this approach
    // e.old_z_index is z-index that I want to set back again. I am just using loop index to set z-index
    e.$event.target.style.zIndex = e.old_z_index
}
...
</script>

위의 접근법을 사용하여 우리는 목표 요소와 관련된 모든 것을 변경할 수 있다.

내가 발견한 아주 간단한 해결책은v-bind:class대신 지시:

이 요소가 비활성 상태일 때 마우스를 추가해야 하는 경우:

:class="{'inactive': !item.count}"

이 경우, 나는 내 클래스에 비활성 속성을 추가할 수 있고, 그리고 나서 간단하게 그 클래스를 스타일링할 수 있다.hover이와 같은 속성:

.inactive {
  color: black;

  &:hover {
    background-color: green;   
  }
}

참조URL: https://stackoverflow.com/questions/46551925/vuejs-v-bindstyle-hover