Vuetify 커스터마이징 - 체크박스

Component Framework 중 Vuetify 커스터마이징을 소개하려 합니다.

Vuetify Document 를 보면 Slot, Props가 잘 소개되어 있는데요.

 

커스터마이징을 어떻게 해서 공용 컴포넌트로 활용할 수 있는지 소개합니다 :-)

 

제가 소개하는 커스터마이징 체크박스는 다음과 같은 기능이 있습니다.

• 체크 데이터 model 적용
• 이미지를 이용한 체크 유무 표기 및 사이즈 지정
• 라벨 표기 유무 및 색상, 사이즈 지정
• 체크박스 가로 위치 지정

데모로 보여드릴 샘플은 다음과 같이 표기됩니다.

커스터마이징 체크박스 데모

코드는 두 개의 파일을 작성하였습니다.

• 데모 페이지를 표기하는 VuetifyCheckBoxView.vue
• 커스터마이징한 CCheckBox.vue

Vuetify 에 v-checkbox 가 있기는 하지만

이 포스팅에서는 v-img 를 이용하여 체크박스를 보여드립니다.

---

VuetifyCheckBoxView 를 먼저 살펴봅니다.

template 영역입니다.

<template>
    <v-row class="pa-5" style="max-width: 500px;">
        <v-col
            v-for="item in checkBoxItems" :key="item.id"
            cols="6"
        >
            <c-check-box
                v-model="item.isChecked"
                :label="item.label"
                align="start"
                fontColor="#888888"
                fontSize="12"
            />
        </v-col>
    </v-row>
</template>

Vuetify 의 v-row, v-col 을 이용하여 c-check-box 컴포넌트를 반복적으로 생성합니다.

c-check-box 의 각 props 는 아래에서 상세 설명 드립니다.

---

다음은 script 영역입니다.

<script>
import CCheckBox from "@/components/common/CCheckBox";

export default {
    name: "VuetifyCheckBoxView",

    data: () => ({
        checkBoxItems : [
            { id: 1, isChecked: true },
            { id: 2, isChecked: false },
            { id: 3, isChecked: false, label: '미체크 상태 박스' },
            { id: 4, isChecked: true, label: '체크 상태 박스' },
        ]
    }),

    components: {
        CCheckBox
    },
}
</script>

• data → checkBoxItems: 각 체크박스의 속성들
• components → CCheckBox Import 처리

---

이제 CCheckBox 을 소개드립니다.

 

먼저 template 영역입니다.

<template>
    <div>
        <v-row no-gutters :justify=align>
            <div class="justify-center">
                <v-img
                    class="c-checkbox-main"
                    :src=computedCheckboxImage
                    @click="click"                     
                />
            </div>
            <div
                class="ml-2 c-checkbox-label"
                v-if="label !== ''"
                :style="computedLabelStyle"
                @click="click"
            >
                {{ label }}
            </div>
        </v-row>
    </div>  
</template>

• v-row→ 체크박스 내용물을 포함시킵니다
• v-img → 체크박스 선택 유무에 따른 이미지를  표기합니다
• div → {{ label }} 가 포함된 div 태그가 체크박스의 라벨 값을 표기합니다.

---

다음은 script 영역입니다.

<script>
export default {
    name: "CCheckBox",

    model: {
        prop: 'isChecked'
    },

    props: {
        isChecked: { type: Boolean },
        label: { type: String, default: '' },
        width: { type: String, default: "20" },
        height: { type: String, default: "20" },
        fontSize: { type: String, default: "13" },
        fontColor: { type: String, default: "#444" },
        align: { type: String, default: 'center' },
    },

    data: () => ({
        selected: false
    }),
    
    watch: {
        "isChecked"() {
            this.selected = this.isChecked
        }
    },

    mounted() {
        this.selected = this.isChecked
    },

    computed: {   
        computedCheckboxImage() {
            if(this.isChecked)
                return this.$store.getters["global/imgUrlPrefix"] + "chk_on.png"
            else
                return this.$store.getters["global/imgUrlPrefix"] + "chk_off.png"
        },
        computedLabelStyle() {
            return {
                "font-size": this.fontSize + "px",
                "color": this.fontColor
            }
        }
    },

    methods: {
        click() {
            this.selected = !this.selected
            this.$emit('input', this.selected)
            this.$emit('click')
        }
    }
}
</script>

• props :
  isChecked → 체크 유무 필드
  label→ 체크 박스 우측에 표기되는 라벨
  width → 체크박스 너비 값
  height → 체크박스 높이 값
  fontColor → 라벨 폰트 색상
  fontSize → 라벨 폰트 사이즈
  align → 라벨 위치 (start, end, center)
• data :
  selected → 내부에서 사용하는 체크 유무
• watch :
  isChecked() → 외부에서 체크박스 값이 변경되는 것을 감지하여 세팅
• mounted() :
  초기 체크박스 값 세팅
• computed :
  computedCheckboxImage → 체크 유무에 따라 이미지 로드
  computedLabelStyle → 체크박스 라벨 스타일
• methods :
  click → 체크박스 클릭 시 이벤트 emit 처리

---

마지막으로 style 영역입니다.

<style>
.c-checkbox-main .v-image__image,
.c-checkbox-main {
    cursor: pointer;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}
.c-checkbox-label {
    cursor: pointer;
    padding-top: 2px;
    max-width: 100%;
}

체크박스에 위치했을 때 마우스 포인터 모양을 표기하고, 사이즈 조절에 관한 스타일링입니다.

---

여기까지 Vuetify 를 이용한  체크박스를 소개드렸습니다.

Vuetify 컴포넌트 커스터마이징 소개 항목은 다음과 같이 많은데 ...

포스팅 작성이 완료되는데로 링크를 연결드리도록 하겠습니다.

 

---

Vuetify 커스터마이징 - 버튼 (v-btn)
Vuetify 커스터마이징 - Popup Dialog (v-dialog)
Vuetify 커스터마이징 - Radio Button Group

Vuetify 커스터마이징 - Snack Bar (v-snackbar)
Vuetify 커스터마이징 - Switch (Toggle) (v-switch)

Vuetify 커스터마이징 - Text Field (v-text-field)
Vuetify 커스터마이징 - Data Table (v-data-table)

Vuetify 커스터마이징 - Tree Table (v-data-table)

Vuetify 커스터마이징 - Month Picker (v-date-picker)

Vuetify 커스터마이징 - Circular Progressbar (v-progress-circular)

Vuetify 커스터마이징 - Multi Selector (v-selector)

Vuetify 커스터마이징 - Single Selector (v-selector)
Vuetify 커스터마이징 - File Input (v-file-input)

---