IT Tip./Vuetify 2.x.x (3) 썸네일형 리스트형 Vuetify에서 로딩(loading) 화면 나타내기 로딩(loading) 화면 나타내기 vuetify version : 2.6.0 Vuetify을 사용하여 포트폴리오용 웹 앱을 개발하고 있던 중 Firebase에서 DB를 불러올 때 로딩이 있어서 로딩 화면을 보여주면 어떨까하게 되어 사용하게 되었다. 로딩화면을 적용하기 위하여 태그를 사용하였고, 적용할 태그와 같은 곳의 상단에 위치시켜 특정 조건에 만족하면 보이게끔 작업하였다. 태그 안의 속성을 보면 v-if에 특정 조건(여기서는 loading의 값이 true이면 보이도록 함)에 만족하면 보이도록 설정하고, size 속성은 로딩 화면의 크기, color는 색깔, indeterminate 속성은 계속 돌아가게 한다. 그리고 언제 어디서 보여줄 것인지 에 함수를 사용하여 동작하게 한다. vuetify를 사용.. Vuetify에서 v-text-field에 rules 적용 및 rules 초기화하기 v-text-field에 rules 적용 및 rules 초기화하기 vuetify version : 2.6.0 Vuetify을 사용하여 포트폴리오용 웹 앱을 개발하고 있던 중 아이템을 추가할 일이 있었다. 추가할 때에는 v-dialog를 띄워서 값을 넣고 클릭하면 DB 저장되는 간단한 기능이었다. 하지만 Firebase DB에 저장되는 터라 빈 값은 저장되지 않기 위하여 v-text-field의 rules 속성으로 직관적으로 보여주면 좋겠다고 생각하여 사용하게 되었다. rules를 적용하는 것은 아주 쉬웠다. 나중에 아래의 코드를 보면 알 수 있듯이 몇 가지만 추가하면 내 마음대로 커스텀할 수 있다. 하지만 rules에 대한 기능이 동작한 후 v-dialog이 꺼져도 계속 남아있는 문제가 있었다. 그래서 .. Vuetify에서 v-btn 사용시 잔상(hover) 제거하기 v-btn 사용시 잔상(hover) 제거하기 vuetify version : 2.6.0 Vuetify을 사용하여 포트폴리오용 웹 앱을 개발하고 있던 중이었다. 요즘따라 없어서는 안되는 기능인 라이트&다크모드를 구현하던 도중에 v-btn(버튼)으로 모드를 전환하게 되었다. 처음에는 그럭저럭 잘 구현되었다고 여겨 다른 것을 개발하던 도중에 어쩌다가 모드변환 버튼을 클릭하였는데 이상하게 버튼을 누르고 난 후 잔상이 남는 것이었다. 이 잔상은 hover 효과에서 오는 것으로 보여 버튼의 잔상을 없애기 위해서는 다른 곳을 다시 클릭하여야만 하였다. 기능적으로는 문제가 없었으나 디테일이 미흡해보여 수정하기 위하여 잔상(hover) 제거에 대한 검색해보았지만 잘 나오지 않았다. 나의 v-btn만이 문제인가 싶어서 v.. 이전 1 다음
