[Spring Boot + Vue.js] 게시판 만들기 - Tooltip, Snackbar

이번 포스팅에서는 보충 설명 및 내용을 표시해주는 말풍선 같은 툴팁과 JavaScript의 Alert과 유사한 스낵바에 대해 알아보자

 

툴팁(Tooltip) 컴포넌트

모바일 화면에서 게시판 상세 댓글 내역에 작성자, 작성시간 아이콘 터치 시 툴팁으로 상세내용을 표시하도록 구현

 

구현

<template>
  <div>
    <v-tooltip v-bind="$attrs">
      <template v-slot:activator="{ on, attrs }">
        <v-icon v-on="on" v-bind="attrs" style="padding:0 10px;">
          {{ iconName }}
        </v-icon>
      </template>
      <span> {{ title }}<br />{{ content }} </span>
    </v-tooltip>
  </div>
</template>

<script>
export default {
  props: {
    iconName: String,
    title: String,
    content: String,
  },
}
</script>

• v-bind="$attrs" 사용 시 선택적으로 필요한 속성만 자식 컴포넌트에 렌더링 할 수 있다.
• v-slot:activator="{ on, attrs }" 는 activator 이름을 가진 슬롯에서 on, attrs 슬롯 속성(slot props)을 가져온다는 의미이다.
• props 속성으로 iconName, title, content를 받아 툴팁을 구성한다.

사용 방법

툴팁 컴포넌트 사용 예시로 게시판 상세 내 댓글 구역의 작성자, 작성일시 아이콘 부분이다.

<Tooltip
  bottom
  iconName="mdi-account"
  title="작성자"
  :content="reply.writer"
/>

동작 확인

스낵바(Snackbar) 컴포넌트

게시글 작성, 수정, 삭제 성공 시 하단에 JavaScript Alert 창 처럼 알림창을 표시한다.

 

구현

1. Snackbar.vue

<template>
  <v-snackbar v-model="sb.show" :color="sb.color" :timeout="3000">
    {{ sb.msg }}
    <template v-slot:action="{ attrs }">
      <v-btn color="white" text v-bind="attrs" @click="sb.show = false">
        <v-icon dark dense>mdi-close-circle-outline</v-icon>
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['sb']),
  },
}
</script>

• v-model="sb.show" 는 store에 저장된 show 값을 바탕으로 스낵바 표시 유무를 설정한다.
• timeout 은 스낵바가 표시되는 시간을 설정한다. (단위는 밀리세컨드)
• @click="sb.show = false" 는 닫기 버튼 클릭 시 show 값을 변경하여 스낵바를 보이지 않도록 한다.

2. store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 스낵바 설정
export const SET_SNACKBAR = 'SET_SNACKBAR'

export default new Vuex.Store({
  state: {
    sb: {
      show: false,
      msg: '',
      color: '',
    },
  },
  mutations: {
    [SET_SNACKBAR](state, sb) {
      state.sb = sb
    },
  },
  actions: {},
  modules: {},
})

• mutations 명을 변수로 선언한 이유는 오타를 방지하기 위함이다.
• state 를 객체로 선언하여 mutations 호출 시 객체를 전달받아 간단하게 스낵바를 제어할 수 있다.

사용 방법

스낵바 컴포넌트는 게시글 작성, 수정, 삭제 성공 시 표시된다.

this.$store.commit('SET_SNACKBAR', {
  show: true,
  msg: 'Delete Complete',
  color: 'error',
})

동작 확인