728x90
반응형
이번 포스팅에서는 보충 설명 및 내용을 표시해주는 말풍선 같은 툴팁과 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',
})
동작 확인
728x90
반응형
'Dev > 실습' 카테고리의 다른 글
[Spring Boot + Vue.js] 게시판 만들기 - 버튼 (0) | 2021.01.14 |
---|---|
[Spring Boot + Vue.js] 게시판 만들기 - Toast UI Editor, Viewer (0) | 2021.01.14 |
[Spring Boot + Vue.js] 게시판 만들기 - 날짜, 시간, 날씨 (0) | 2021.01.13 |
[Spring Boot + Vue.js] 게시판 만들기 - 구성 (0) | 2021.01.13 |
[Spring Boot + Vue.js] 게시판 만들기 - 소개 (3) | 2021.01.13 |
댓글