Vuetify에서 v-btn 사용시 잔상(hover) 제거하기

 

 

v-btn 사용시 잔상(hover) 제거하기

 

 

 

---

<버전 정보>

• vuetify version : 2.6.0

 

---

 

<사용 계기>

• Vuetify을 사용하여 포트폴리오용 웹 앱을 개발하고 있던 중이었다. 요즘따라 없어서는 안되는 기능인 라이트&다크모드를 구현하던 도중에 v-btn(버튼)으로 모드를 전환하게 되었다.
• 처음에는 그럭저럭 잘 구현되었다고 여겨 다른 것을 개발하던 도중에 어쩌다가 모드변환 버튼을 클릭하였는데 이상하게 버튼을 누르고 난 후 잔상이 남는 것이었다. 이 잔상은 hover 효과에서 오는 것으로 보여 버튼의 잔상을 없애기 위해서는 다른 곳을 다시 클릭하여야만 하였다.
• 기능적으로는 문제가 없었으나 디테일이 미흡해보여 수정하기 위하여 잔상(hover) 제거에 대한 검색해보았지만 잘 나오지 않았다. 나의 v-btn만이 문제인가 싶어서 vuetify 공식사이트에서 v-btn을 모조리 확인한 결과 fab 속성이 들어간 v-btn(버튼)만이 잔상을 남기는 것이었다.
  • fab(Floating Action Button)은 보통 안드로이드 앱에서 많이 사용되며, UI위에 원형 아이콘으로 떠있으며, 클릭하면 세부 원형 아이콘이 나오는 형태가 일반적이다. vuetify의 v-btn에 속성으로 추가하면 버튼이 둥글게 된다.
• fab의 속성을 확인하고 난 후에 생각해보니 클릭했을 때 잔상(hover효과)이 남는 이유는 보통 이때에 세부 아이콘들이 나와서 그런 것으로 생각되어 내가 사용하려고 하는 모드 변환 기능의 버튼으로는 적합하지 않은 속성이었다.
• 그래서 원래 상태를 유지하며 fab을 속성을 사용하지 않고 해결할 방법을 다시 찾게 되었다.

 

---

 

<적용 과정>

• 내가 적용할 라이트 & 다크 모드 버튼은 아이콘만 있는 버튼이어서 v-btn의 icon 속성을 이용할 수 있을 것으로 생각되어 바로 적용해보았다.
• 역시나 잔상(hover)은 나타나지 않았고 잘 동작하였다. v-btn에 icon 속성이 들어가니 icon 색깔이 모드의 기본 색깔을 따라가서 따로 커스텀으로 바꾸었다.

 

---

 

<실제 코드>

<!-- DarkMode.vue -->
<template>
...
    <v-btn
      color="icon"
      depressed
      icon
      large
      @click="changeTheme(color)"
    >
      <v-icon>{{ color == 'light' ? icon.light : icon.dark }}</v-icon>
    </v-btn>
...
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      modeText: null,
      icon: {
        light: 'mdi-white-balance-sunny',
        dark: 'mdi-weather-night'
      }
    }
  },
  methods: {
    ...mapMutations([
      'changeMode'
    ]),
    changeTheme (color) {
      if (color === 'light') {
        this.$vuetify.theme.light = false
        this.$vuetify.theme.dark = true
      } else {
        this.$vuetify.theme.dark = false
        this.$vuetify.theme.light = true
      }
      this.changeMode(color)
    }
  },
  computed: {
    ...mapState({
      color: state => state.local.mode.color
    })
  }
}
</script>

 

---

 

<정리>

• vuetify 공식사이트에서 대부분 가져다 쓰다보니 v-btn의 속성에 대한 이해가 부족하여서 생긴 이슈였다.
• vuetify에서 사용할 수 있는 태그들과 속성은 다 알기에는 수가 너무 많으나 내가 사용하는 속성에 대해서는 어느 절도 이해하고 넘어가면 위와 같은 이슈는 좀 더 줄어들 것으로 보인다.

 

---

 

<참고 페이지>

• vuetify의 v-btn 공식사이트 : https://vuetifyjs.com/en/api/v-btn/

v-btn API

• FAB 참고 블로그 : https://brunch.co.kr/@ebprux/605

플로팅 액션 버튼의 UX 디자인