vue实现上移下移插件

Vue 实现上移下移功能

实现列表项的上移和下移功能可以通过操作数组索引来完成。以下是基于 Vue 2 或 Vue 3 的实现方法。

基本实现

定义数据和方法操作数组项的位置：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ item.name }}
        <button @click="moveUp(index)" :disabled="index === 0">上移</button>
        <button @click="moveDown(index)" :disabled="index === items.length - 1">下移</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
      ]
    }
  },
  methods: {
    moveUp(index) {
      if (index > 0) {
        const temp = this.items[index];
        this.$set(this.items, index, this.items[index - 1]);
        this.$set(this.items, index - 1, temp);
      }
    },
    moveDown(index) {
      if (index < this.items.length - 1) {
        const temp = this.items[index];
        this.$set(this.items, index, this.items[index + 1]);
        this.$set(this.items, index + 1, temp);
      }
    }
  }
}
</script>

使用 Vue 3 Composition API

Vue 3 中可以使用 ref 和 reactive 实现类似功能：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ item.name }}
        <button @click="moveUp(index)" :disabled="index === 0">上移</button>
        <button @click="moveDown(index)" :disabled="index === items.length - 1">下移</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
      { id: 4, name: 'Item 4' },
    ]);

    const moveUp = (index) => {
      if (index > 0) {
        [items.value[index], items.value[index - 1]] = [items.value[index - 1], items.value[index]];
      }
    };

    const moveDown = (index) => {
      if (index < items.value.length - 1) {
        [items.value[index], items.value[index + 1]] = [items.value[index + 1], items.value[index]];
      }
    };

    return { items, moveUp, moveDown };
  }
}
</script>

封装为可复用组件

可以将上移下移功能封装为独立组件：

<template>
  <div>
    <slot :items="items" :moveUp="moveUp" :moveDown="moveDown"></slot>
  </div>
</template>

<script>
export default {
  props: {
    initialItems: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      items: [...this.initialItems]
    }
  },
  methods: {
    moveUp(index) {
      if (index > 0) {
        [this.items[index], this.items[index - 1]] = [this.items[index - 1], this.items[index]];
      }
    },
    moveDown(index) {
      if (index < this.items.length - 1) {
        [this.items[index], this.items[index + 1]] = [this.items[index + 1], this.items[index]];
      }
    }
  }
}
</script>

使用方式：

<template>
  <MoveableList :initial-items="items">
    <template #default="{ items, moveUp, moveDown }">
      <ul>
        <li v-for="(item, index) in items" :key="item.id">
          {{ item.name }}
          <button @click="moveUp(index)" :disabled="index === 0">上移</button>
          <button @click="moveDown(index)" :disabled="index === items.length - 1">下移</button>
        </li>
      </ul>
    </template>
  </MoveableList>
</template>

动画效果

添加过渡动画提升用户体验：

<template>
  <div>
    <transition-group name="list" tag="ul">
      <li v-for="(item, index) in items" :key="item.id">
        {{ item.name }}
        <button @click="moveUp(index)" :disabled="index === 0">上移</button>
        <button @click="moveDown(index)" :disabled="index === items.length - 1">下移</button>
      </li>
    </transition-group>
  </div>
</template>

<style>
.list-move {
  transition: transform 0.5s;
}
</style>