[ Vue.js ] 를 이용한 select box 꾸미기

"selectbox 꾸미기"라고 검색하니까 대부분 음...

말을 안해도 다들 아실 것 같지만 내가 생각하는 그런 이쁜 ui로써의 꾸미기가 아니었다.

( 물론 지원안해줘서 그런 것일 테지 음음..! )

보통 이렇게 까지 selectbox와 option의 ui를 신경쓸 경우가 잘 없었지만

앞으로 내가 만드는 페이지엔 이렇게 이쁘게 할 것이다 😠!

 

구글링을 하던 도중 js로 나와 비슷하게 하신분 포스팅을 봤는데

나는 최근에 접한 vue의 template기능을 통해 구현하였다.

( name속성 및 value까지 정상 작동! )

 

 

---

완성작✨

( 이거 혹시 실제 작동하도록 넣는 방법 아시는분... html로 저장하니까 깨져용...😥 )

 

 

 

HTML코드에 딱히 볼건 없다.

일반 select사용하듯이 사용하면 된다.

select의 name속성과 option의 값들이 자동으로 만들어지도록 해놨고

한가지 다른점은 data-title이 없으면 커스텀된 select박스에서 선택전에 '-'로 표시가 되고

data-title이 있으면 해당 값이 선택전에 표시될 것이다.

<select name="count" data-title="선택">
     <option value="0">선택</option>
     <option value="1">one</option>
     <option value="2">two</option>
     <option value="3">three</option>
</select>

 

스크립트도 생각보다 볼게 없다 🙄

한번 보시면 크게 어렵지않게 이해가 바로 되실 것 같지만...

설명을 간략하게 적어놓겠다.

 

[ 변수 ]

title : 위에서 설명한 data-title

name : select의 name 속성명

value : select의 value값

values : option의 value값 배열

options : option의 이름 배열

isActive : 커스텀 select박스 활성 여부

 

created함수에서 변수들을 초기화 해주었고

methods에서는 커스텀 select박스의 클릭 이벤트와

값을 선택했을때의 이벤트가 있다.

 

selectCustom 생성시 template가 만들어질텐데

기존 select의 name을 가져와서 <input type="hidden" name="name속성명">에

값을 가지고 있을 수 있도록 해놨다.

var selectCustom = (elSelect) => {
    return {
        el: elSelect,
        data: {
            title: "",
            name: "",
            value: "",
            values: [],    // option value
            options: [],   // option name
            isActive: false,
        },
        created(){
        
            var v = this;
            v.title = $(elSelect).data("title") ? $(elSelect).data("title") : "-";
            v.name = $(elSelect).attr("name");
            
            $(elSelect).find("option").each(function(){
                v.values.push( $(this).val() );
                v.options.push( $(this).text() );
            });
        },
        methods: {
            toggleOptionList(){
                this.isActive = !this.isActive;
            },
            
            setValue(value, idx){
                this.isActive = false; // close                    
                this.value = value;
                this.title = this.options[idx];                    
            }
        },
        template: `
            <div class="select-wrapper">
                <input type="hidden" v-bind:name="name" v-bind:value="value">
                <div class="select-custom">
                    <div class="select" v-on:click="toggleOptionList();">{{title}}</div>
                    
                    <ul v-show="isActive">
                        <li v-for="(value, idx) in values" v-on:click="setValue(value, idx)">{{ options[idx] }}</li>
                    </ul>
                </div>
            </div>
        `,
    }
};

$(document).ready(function(){
    $('select').each(function(idx){
        $(this).attr("id", "c-select"+idx);
        new Vue( selectCustom( "#"+$(this).attr("id") ) );
    });
});

그리고 현재 코드를 보면 모든 select가 자동으로 바뀌도록 해놨는데

직접 특정 select만 하고싶다고 하시면

하단의 each함수를 지우시고 new Vue( selectCustom( "아이디선택자" ) ); 선언하면 된다 :)

 

 

앞으로 내가 쓰려고 만든 코드 포스팅 끝!

나중엔 multiselect까지 해놔야지! ☺

혹시 코드에 대한 좋은 의견있으면 댓글로 달아주시면 업그레이드 해보도록 하겠습니당 XD

 

전체 코드 : github.com/hyeon-min-roh/custom-select