[VUE.js] vue3 selectbox mutiple dropdown구현하기

[결과]

 

[구현]

select box에 속성을 mutiple로 지정해놓으니까 클릭했을때 저절로 dropdown이 안됐다.

그런데 드롭다운이 안되면 너무 ui가 불편하기 때문에 클릭했을때 목록이 쭈르륵 나와야 했다. 

       <select
         class="addbox__topleft__select"
         multiple 
         v-model="selected" 
         :size="selectSize"
         @focus="focusSelect"
         @blur="blurSelect"
         >
         <option
         v-for="genre in selectBoxGenres"
         :key="genre"
         :value="genre">
         {{genre}}</option>
       </select>

그래서 size를 selectSize로 바인딩하고 

focus이벤트에서 size를 키우고 blur이벤트에서 size를 1로 돌렸다.

const selectFocus = ref<boolean>(false);
const selectSize = computed(() => (selectFocus.value ? 10 : 1));

    const focusSelect = () => {
      selectFocus.value = true;
    };
    const blurSelect = () => {
      selectFocus.value = false;
    };