vuetify 썸네일형 리스트형 [vue2] vue.draggable 사용하기와 v-treeview 적용 검토 들어가기 v-treeview에서 드래그앤드롭을 구현하기 위해 vue.draggable을 사용을 간단하게 검토해보았다. 일단 vue.draggable 사용법을 살펴보고 v-treeview을 적용을 해보았다. 결론을 먼저 말하면 v-treeview 적용 검토결과 제대로 적용되지 않았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ vue.draggable 사용하기 vue.draggable은 vue에서 손쉽게 드래그 앤 드롭 작업을 구현하기 위한 모듈이다. 먼저 헤더 내용을 작성하자. 다음으로 vue.draggable로 화면에 표시할 간단한 구조를 만들어보자. 목록을 표시하고 목록간에 드래드 앤 드롭을 하는 예제이다. {{item}} 사용할 라이브러리을 포함시.. 더보기 [vue2] vuetify 기본 구성 들어가기 vuetify는 vue.js에서 사용하는 대표적인 UI 컴포넌트 프레임워크 중에 하나이다. 라이센스는 MIT license이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 설치 yarn add vuetify yarn add sass@~1.32 sass-loader deepmerge -D plugin src 밑에 plugins 폴더에 vuetify.js 파일 생성한다. plugins 폴더가 없다면 새로만들면 된다. import Vue from 'vue'; import Vuetify from 'vuetify/lib/framework'; // import 'vuetify/dist/vuetify.min.css'; Vue.use(Vuetify); exp.. 더보기 [vue2] vuetify 팝업 모달창 사용 vuetify를 사용한 팝업 모달창 사용법을 간단하게 정리해보았다. 들어가기 vuetify의 v-dialog을 사용해서 팝업모달창을 만들어보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ template 작성 확인 script 작성 사용예 등록된 컴포넌트명이 "Popup"이라고 가정하겠다. 사용할 팝업창을 ref 형태로 추가한다. let res = this.$refs.popup.open(this.popupValue); if (res) { console.log('result is', res); } else { console.log('popup cancel'); } $refs 통해서 open()을 호출한다. 참고 [1] Dialogs, https://vue.. 더보기 이전 1 다음
