Vue 2

[Vue.js] vuetify v-combobox item list 스타일 변경

원인 vuetify 라이브러리에서 를 사용할 때 item list의 스타일을 변경해야 했다. 하지만 combobox을 클릭해서 item list를 열게 되면 아이템 목록은 combobox의 하위가 아닌 곳에 생성되게 된다. 그렇다고 scss로 v-menu-content 클래스의 스타일을 변경하게 되면 내가 원치 않은 곳에 스타일이 변경 되게 된다.... 해결 과정 일단 item list를 개발자도구로 확인했다. item list는 vuetify의 v-menu로 이루어진 것을 확인할 수 있었다. 그럼 라이브러리에서 v-combobox에서 menu로 속성이나 style을 변경할 수 있게 만들지 않았을까?? v-combobox의 API 문서를 확인해보면 menu-prop이라는 옵션을 확인할 수 있다. Pass..

Vue.js 2022.09.01

[Vue.js] UI 라이브러리 클래스에 스타일 적용하기

사내 Vue 프로젝트는 buefy라는 UI라이브러리를 사용하고 있다. 프로젝트를 진행하면서 buefy에서 제공하는 요소의 스타일을 변경하고 싶은데 일부는 변경되고 일부는 변경되지 않는 문제가 있었다. Scoped vue의 style 태그에는 scoped 속성을 사용할 수 있다. scoped는 특정 컴포넌트의 스타일이 해당 컴포넌트에만 적용되도록 강제하는 역할을 한다. Foo1.vue scoped를 사용하면 돔 속성에 랜덤한 이름이 생성된다. 개발자도구로 Foo1 컴포넌트를 확인하면 돔 속성에 랜덤한 이름 (data-v-544b6424)이 생성된 것을 확인할 수 있다. scoped를 사용했을 때 실제 동작되는 코드를 풀어서 작성하면 아래와 같다. scoped 속성을 사용할 때 UI라이브러리의 요소가 일부는..

Vue.js 2022.08.19