[Java Web programming] [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', |
|
|
}) |
동작 확인
[출처] https://dev-jsk.tistory.com/130
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
