如何使用Vue實現可折疊和拖曳排序效果？-Vue.js-PHP中文網

如何使用Vue實現可折疊和拖曳排序效果？

WBOY

發布： 2023-06-27 11:27:21

原創

1700 人瀏覽過

在前端開發中，實現可折疊和拖曳排序效果是比較常見的需求。而使用Vue框架可以簡單快速地實現這個功能。本文將介紹如何使用Vue實現可折疊和拖曳排序效果，讓頁面看起來更美觀易用。

一、可折疊效果

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.component()方法來建立一個元件：

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'的元件。它可以接受兩個屬性：header和content。我們使用了data()方法來建立一個show變量，它的初始值為false，表示折疊框的內容處於隱藏狀態。然後，我們使用toggle()方法來在點擊標題時切換show變數的值。最後，我們使用template屬性來定義元件的HTML結構。

1.3 在HTML中使用元件

最後，我們只需要在HTML中使用這個元件：

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

登入後複製

這裡我們給元件傳遞了兩個屬性：header和content 。這將分別在組件中顯示為折疊框的標題和內容。點擊標題後，內容將展開或折疊。

二、拖曳排序效果

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;
}

登入後複製

在這裡，我們使用了flex佈局，使得元素可以自動換行。每個元素都有一個灰色背景和邊框，當滑鼠懸停在上面時，遊標樣式會變成“grab”，表示可以拖曳。

2.2 新增Vue元件

為了實現拖曳排序效果，我們還需要加入一個Vue元件。同樣，我們要導入Vue：

import Vue from 'vue';

登入後複製

然後，我們使用Vue.component()方法建立一個元件：

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()方法來建立一個items數組，它包含了需要排序的元素。然後，我們使用mounted()方法在元件載入後初始化Sortable函式庫，並將其應用到元件的根元素上。我們使用了template屬性來定義元件的HTML結構。

在拖曳結束時，我們使用onEnd()方法來更新items陣列。我們使用splice()方法從items陣列中刪除一個元素並返回，並使用splice()方法將該元素插入到新的位置。

2.3 在HTML中使用元件

最後，我們在HTML中使用這個元件：