Vue를 사용하여 축소 가능하고 드래그 앤 드롭 방식의 정렬 효과를 얻는 방법은 무엇입니까?

프런트엔드 개발에서는 접을 수 있고 드래그 앤 드롭 방식의 정렬 효과를 구현하는 것이 일반적인 요구 사항입니다. 이 기능은 Vue 프레임워크를 사용하여 쉽고 빠르게 구현할 수 있습니다. 이 기사에서는 Vue를 사용하여 폴더블 및 드래그 앤 드롭 정렬 효과를 구현하여 페이지를 더욱 아름답고 사용하기 쉽게 만드는 방법을 소개합니다.

1. 접을 수 있는 효과

1.1 HTML 및 CSS 코드 작성

먼저 아래와 같이 HTML로 접어야 하는 요소를 만듭니다.

<div class="collapse">
  <div class="header">折叠标题</div>
  <div class="content">折叠内容</div>
</div>

그런 다음 CSS를 사용하여 이러한 요소의 스타일을 지정합니다.

.collapse {
  border: 1px solid #ccc;
}

.header {
  background-color: #eee;
  cursor: pointer;
  padding: 10px;
}

.content {
  padding: 10px;
}

여기에서는 아코디언 상자에 테두리를 추가하고 배경색과 커서 스타일을 설정했습니다. 동시에 제목을 클릭할 때 콘텐츠의 표시/숨김 상태를 전환하기 위해 제목에 클릭 이벤트를 추가했습니다.

1.2 Vue 구성 요소 추가

다음으로 축소 가능한 효과를 위한 Vue 구성 요소를 만들어야 합니다. 먼저 Vue를 가져오려고 합니다.

import Vue from 'vue';

그런 다음 Vue.comComponent() 메서드를 사용하여 구성 요소를 만들 수 있습니다.

Vue.component('collapse', {
  props: {
    header: String,
    content: String,
  },
  data() {
    return {
      show: false, // 初始状态为隐藏
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
  template: `
    <div class="collapse">
      <div class="header" @click="toggle">{{ header }}</div>
      <div class="content" v-show="show">{{ content }}</div>
    </div>
  `,
});

여기서는 'collapse'라는 구성 요소를 만들었습니다. 헤더와 콘텐츠라는 두 가지 속성을 허용할 수 있습니다. 우리는 data() 메소드를 사용하여 접는 상자의 내용이 숨겨져 있음을 나타내는 초기 값이 false인 표시 변수를 만들었습니다. 그런 다음 제목을 클릭할 때 전환() 메서드를 사용하여 표시 변수의 값을 전환합니다. 마지막으로 템플릿 속성을 사용하여 구성 요소의 HTML 구조를 정의합니다.

1.3 HTML에서 구성 요소 사용

마지막으로 HTML에서 이 구성 요소만 사용해야 합니다.

<collapse header="折叠标题" content="折叠内容"></collapse>

여기서 구성 요소에 헤더와 콘텐츠라는 두 가지 속성을 전달합니다. 이는 각각 축소 상자의 제목과 내용으로 구성 요소에 표시됩니다. 제목을 클릭하면 내용이 확장되거나 축소됩니다.

2. 드래그 앤 드롭 정렬 효과

2.1 HTML 및 CSS 코드 작성

먼저 드래그 앤 드롭 효과를 얻는 방법을 살펴보겠습니다. 먼저 아래와 같이 HTML에서 정렬해야 하는 요소를 만듭니다.

<div id="app">
  <div class="sortable">
    <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
  </div>
</div>

그런 다음 CSS 스타일을 사용하여 이러한 요소의 스타일을 지정합니다.

.sortable {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}

.item {
  background: #eaeaea;
  border: 1px solid #ccc;
  cursor: grab;
  margin: 10px;
  padding: 10px;
  text-align: center;
  width: 100px;
}

여기에서는 요소가 자동으로 래핑될 수 있도록 플렉스 레이아웃을 사용합니다. 각 요소에는 회색 배경과 테두리가 있습니다. 마우스를 해당 요소 위로 가져가면 커서 스타일이 "잡기"로 변경되어 드래그할 수 있음을 나타냅니다.

2.2 Vue 구성 요소 추가

드래그 앤 드롭 정렬 효과를 얻으려면 Vue 구성 요소도 추가해야 합니다. 다시 한 번 Vue를 가져오겠습니다.

import Vue from 'vue';

그런 다음 Vue.comComponent() 메서드를 사용하여 구성 요소를 만듭니다.

Vue.component('sortable', {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
      ],
    };
  },
  mounted() {
    const sortable = new Sortable(this.$el, {
      animation: 150,
      onEnd: event => {
        const item = this.items.splice(event.oldIndex, 1)[0];
        this.items.splice(event.newIndex, 0, item);
      },
    });
  },
  template: `
    <div class="sortable">
      <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
    </div>
  `,
});

여기서는 "sortable"이라는 구성 요소를 만듭니다. data() 메서드를 사용하여 정렬해야 하는 요소가 포함된 항목 배열을 만듭니다. 그런 다음 Mounted() 메서드를 사용하여 구성 요소가 로드된 후 Sortable 라이브러리를 초기화하고 이를 구성 요소의 루트 요소에 적용합니다. 템플릿 속성을 사용하여 구성 요소의 HTML 구조를 정의합니다.

드래그가 끝나면 onEnd() 메서드를 사용하여 항목 배열을 업데이트합니다. 항목 배열에서 요소를 제거하고 반환하려면 splice() 메서드를 사용하고, 새 위치에 요소를 삽입하려면 splice() 메서드를 사용합니다.

2.3 HTML에서 구성 요소 사용

마지막으로 HTML에서 이 구성 요소를 사용합니다.

<sortable></sortable>

이렇게 하면 드래그 가능한 요소와 정렬 효과가 표시됩니다.

요약

이 글에서는 Vue를 사용하여 접기 및 드래그 앤 드롭 정렬 효과를 얻는 방법을 소개했습니다. 이러한 기술은 페이지 디자인을 더욱 아름답고 사용하기 쉽게 만드는 데 도움이 될 수 있습니다. 이러한 기술은 개인 및 상업 프로젝트 모두에 매우 유용합니다. 이 기사가 Vue를 사용하여 이러한 대화형 효과를 얻고 향후 프로젝트에 적용하여 페이지를 더욱 매력적이고 사용하기 쉽게 만드는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다.

위 내용은 Vue를 사용하여 축소 가능하고 드래그 앤 드롭 방식의 정렬 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!