Flash Code#1 Vue.js를 사용한 드래그 앤 드롭 컴포넌트
시사
링크: Flash Code
UI부터 시작하겠습니다.
몇 가지 순풍 클래스가 있는 단일 div를 넣습니다.
CSS 클래스가 하는 일:
bg-gray-200, round-lg, border-2, border-dashed 및 border-gray-500: 이들은 Tailwindcss 클래스입니다. 그것들은 꽤 자명하지만 더 많은 정보를 원한다면 Tailwind'sdocs를 확인할 수 있습니다.
dropzone: 너비를 400px로, 높이를 500px로 설정합니다.
그리고 그것이 우리가 얻은 것입니다.
이제 내부에 텍스트를 추가해 보겠습니다. 첫 번째 div 안에 다른 div를 추가하기만 하면 됩니다.
<script id="gist-ltag"src="https://gist.github.com/Karm0s/3f421a1d381b1ddaa0a0ee87ba31950e.js"/>
dropzone-child-elements를 제외한 모든 css 클래스는 Tailwindcss에서 가져왔습니다. 이 클래스는 사용자가 dropzone 내부의 콘텐츠와 상호 작용하는 것을 방지하고 규칙은 하나만 포함합니다.
포인터 이벤트: 없음;
다음과 같이 표시됩니다.
이제 무언가를 하도록 만들 차례입니다(논리):
1-파일을 드래그할 때 테두리 색상 변경:
먼저 파일을 드래그할 때 테두리 색상을 변경하여 드롭존을 대화형으로 만들어 보겠습니다. dragenter 및 dragleave 이벤트를 사용하여 파일이 드롭 영역을 가리키고 있는지 감지합니다. fileOverDropArea라는 변수를 사용하여 테두리 색상을 제어합니다.
<script id="gist-ltag"src="https://gist.github.com/Karm0s/4b829d22596b0f57945fa7b562e2e221.js"/>
작동 방식을 설명하겠습니다.
이 코드는 파일이 드롭다운 영역에 들어가거나 나갈 때 fileOverDropArea를 true 또는 false로 설정합니다.
.prevent는 해당 이벤트가 실행될 때 기본 작업을 취소합니다.
<script id="gist-ltag"src="https://gist.github.com/Karm0s/eaa54e2b5bd76b3061a0cef0dc9bc613.js"/>
Vue 덕분에 class 속성을 바인딩하여 특정 조건이 충족되는 경우에만 일부 클래스를 추가할 수 있습니다. 이 경우 fileOverDropArea가 false이면 테두리 색상을 어두운 회색으로 설정하고 true이면 빨간색으로 설정합니다.
<script id="gist-ltag"src="https://gist.github.com/Karm0s/7d67fa22d263d9fdfa326ac3db8cf2a5.js"/>
2- 파일 업로드 처리:
이제 호버 애니메이션이 작동했으므로 파일 업로드 부분을 처리해 보겠습니다.
이것은 실제로 가장 쉬운 부분입니다. 우리가 해야 할 일은 drop이라는 다른 이벤트를 수신한 다음 이벤트가 실행될 때 메서드를 호출하는 것입니다.
이를 위해 다음 코드 줄을 dropzone div에 추가합니다.
@drop.prevent="dropFile"
dropFile 메서드의 코드입니다.
<script id="gist-ltag"src="https://gist.github.com/Karm0s/0c8f1966290e6ff997d7c5d35f1b70c7.js"/>
전체 구성 요소 코드:
<script id="gist-ltag"src="https://gist.github.com/Karm0s/5797ffd2c67e9a2bde9b184a6dfe908b.js"/>
이 시리즈에 대한 간략한 설명:
Flash Code는 Vuejs를 사용하여 다양한 구성 요소를 빌드하는 방법을 보여주는 일련의 게시물입니다. 이것은 첫 번째 게시물이며 다음 주에 많은 게시물이 나올 것입니다.
이 첫 번째 게시물에 대한 귀하의 생각을 듣고 싶습니다(실제로 이것은 내 첫 번째 블로그 게시물입니다).
읽어주셔서 감사합니다.
Reference
이 문제에 관하여(Flash Code#1 Vue.js를 사용한 드래그 앤 드롭 컴포넌트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/karm0s/flash-code-1-drag-drop-component-using-vue-js-5h1d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
