Vue에서 사용자 지정 확인란 양식을 만드는 방법

게시물How to Create a Custom Checkbox Form in Vue은 Qvault에 처음 등장했습니다.

당신은 문제가있다. 브라우저의 기본 체크박스 형식은 보기 흉하고 구식이지만 스타일을 변경하기 위해 전체 라이브러리를 가져오는 것은 지나친 일처럼 보입니다. 대신 처음부터 사용자 지정 확인란 양식 구성 요소를 빌드해 보겠습니다. 입력하는 데 15분이 걸리며 내 상용구 코드를 복사하여 붙여넣기만 하면 3분이면 됩니다.

작동 방식을 알아보기 전에 라이브 데모here를 보거나 Qvault의 가입 절차coding courses platform.에서 프로덕션에서 어떻게 사용하고 있는지 확인할 수 있습니다.

다른 커스텀 Vue 컴포넌트를 만드는 방법

계속 진행하기 전에 다른 사용자 지정 Vue.js 구성 요소 자습서를 찾고 있다면 여기에서 찾을 수 있습니다.

Custom select component in Vue

Custom tooltip component In Vue

Custom toggle switch component in Vue

Custom slider component in Vue

HTML

<template>
  <div>
    <div class="checkbox-form">
      <div class="answers">
        <label
          v-for="(option, i) of options"
          :key="i"
          class="item"
        >
          <span :for="option">{{ option }}</span>
          <input
            :id="option"
            v-model="checked"
            type="checkbox"
            :value="option"
            @change="onChange"
          >
          <span class="checkmark" />
        </label>
      </div>
    </div>
  </div>
</template>

보시다시피 여기서 중요한 것은 컴포넌트의 props에 제공된 각 옵션에 대해 input 및 span 요소를 생성한다는 것입니다. 다음 단계에서 스타일을 지정하고 기능을 추가할 것입니다.

자바스크립트

export default {
  props: {
    options: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data(){
    return {
      checked: []
    };
  },
  methods: {
    onChange() {
      this.$emit('input', this.checked);
    }
  }
};

사용자가 사용할 수 있는 모든 옵션을 나타내는 하나의 prop: options 만 필요합니다. 상자가 선택되면 이를 checked 상태 변수에 추가하고 변수가 변경될 때마다 부모가 계속 반응할 수 있도록 내보냅니다.

CSS

.checkbox-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkbox-form .answers {
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 100%;
}

.checkbox-form label {
    margin-left: 1em;
}

.checkbox-form .item {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1em;
    height: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
}

.checkbox-form .item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-form .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #c2c2c2;
}

.checkbox-form .item:hover input ~ .checkmark {
    background-color: #949494;
}

.checkbox-form .item input:checked ~ .checkmark {
    background-color: #D8A22E;
}

.checkbox-form .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-form .item input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-form .item .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

여기서 미친 짓은 일어나지 않지만 중요한 점은 기본 입력을 완전히 숨기고 span 요소를 실제 체크 표시로 스타일링한다는 것입니다.

함께 모아서

<template>
  <div>
    <div class="checkbox-form">
      <div class="answers">
        <label
          v-for="(option, i) of options"
          :key="i"
          class="item"
        >
          <span :for="option">{{ option }}</span>
          <input
            :id="option"
            v-model="checked"
            type="checkbox"
            :value="option"
            @change="onChange"
          >
          <span class="checkmark" />
        </label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data(){
    return {
      checked: []
    };
  },
  methods: {
    onChange() {
      this.$emit('input', this.checked);
    }
  }
};
</script>

<style scoped>
.checkbox-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkbox-form .answers {
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 100%;
}

.checkbox-form label {
    margin-left: 1em;
}

.checkbox-form .item {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1em;
    height: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
}

.checkbox-form .item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-form .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #c2c2c2;
}

.checkbox-form .item:hover input ~ .checkmark {
    background-color: #949494;
}

.checkbox-form .item input:checked ~ .checkmark {
    background-color: #D8A22E;
}

.checkbox-form .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-form .item input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-form .item .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
</style>

읽어 주셔서 감사합니다!

테이크computer science courses on our new platform

질문이나 의견이 있으면 Twitter를 팔로우하고 연락하십시오.

Subscribe 더 많은 프로그래밍 기사를 보려면 뉴스레터로