[Java Web programming] [Spring Boot + Vue.js] 게시판 만들기 - 버튼
2023.04.07 21:31
[Java Web programming] [Spring Boot + Vue.js] 게시판 만들기 - 버튼
이번 포스팅은 공통으로 사용되는 버튼을 컴포넌트화 하는 것에 대해 알아보자
버튼 컴포넌트
기존 v-btn에 추가적으로 반응형, 아이콘을 적용하기 위해 공통 컴포넌트로 구현
구현
1. 컴포넌트 구현
|
|
<template> |
|
|
<v-btn |
|
|
class="white--text" |
|
|
v-on="$listeners" |
|
|
v-bind="$attrs" |
|
|
v-if="!isMobile()" |
|
|
> |
|
|
<v-icon small> |
|
|
{{ iconName }} |
|
|
</v-icon> |
|
|
<span style="width: 5px" v-if="btnName"></span> |
|
|
{{ btnName }} |
|
|
</v-btn> |
|
|
<v-btn class="white--text" v-on="$listeners" v-bind="$attrs" v-else> |
|
|
<v-icon small> |
|
|
{{ iconName }} |
|
|
</v-icon> |
|
|
</v-btn> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
import btnMixins from '@/mixins/btnMixins' |
|
|
|
|
|
export default { |
|
|
mixins: [btnMixins], |
|
|
props: { |
|
|
iconName: String, |
|
|
btnName: String, |
|
|
}, |
|
|
} |
|
|
</script> |
v-on="$listeners"를 사용하면 부모의 이벤트 리스너를 자식에게 전달할 수 있다.v-bind="$attrs"사용 시 선택적으로 필요한 속성만 자식 컴포넌트에 렌더링 할 수 있다.- Mixins 을 이용하여 구현한
isMobile()함수를 사용하여 화면 사이즈가 모바일인지 여부를 확인하여 버튼의 모양을 다르게 구성한다.
2. Mixins 구현
|
|
export default { |
|
|
methods: { |
|
|
isMobile() { |
|
|
return this.$vuetify.breakpoint.mobile |
|
|
}, |
|
|
}, |
|
|
} |
- Vuetify의
breakpoint속성을 이용해 모바일 화면 여부를 리턴한다.
3. 전역 컴포넌트 선언
|
|
// 버튼 전역 컴포넌트 |
|
|
import Button from '@/components/common/Button' |
|
|
// 버튼 전역 컴포넌트 선언 |
|
|
Vue.component('Button', Button) |
main.js에 버튼 컴포넌트를 전역으로 선언하여 각 컴포넌트마다 import 가 필요 없도록 한다.
사용 방법
버튼은 여러 곳에 쓰이지만 예시로 게시판 목록의 검색 버튼 부분이다.
|
|
<template> |
|
|
<Button |
|
|
@click="getBoardList" |
|
|
color="blue-grey darken-1" |
|
|
rounded |
|
|
small |
|
|
block |
|
|
iconName="mdi-magnify" |
|
|
btnName="Search" |
|
|
></Button> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
export default { |
|
|
methods: { |
|
|
getBoardList() { |
|
|
// 게시글 목록 조회 |
|
|
}, |
|
|
}, |
|
|
} |
|
|
</script> |
v-btn의 다양한 속성과props속성으로 전달할 아이콘, 버튼 명을 설정한다.- click 이벤트로 부모 컴포넌트에 존재하는 게시글 목록 조회 함수를 호출한다.
동작 확인
[출처] https://dev-jsk.tistory.com/132
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
