TypeScript驱动Vue3穿梭框组件实现

2023-12-19 05:36:32

打造自定义Vue3穿梭框组件：赋能用户选择和排序

序言

在用户交互式应用程序中，经常需要提供用户选择或重新排序选项。穿梭框组件是一个极佳的解决方案，它允许用户在不同的集合之间轻松移动项目。本文将指导您使用TypeScript构建一个完全自定义的Vue3穿梭框组件，该组件可无缝集成到您的应用程序中。

创建穿梭框组件

1. 结构搭建

创建一个Vue组件名为Shuttle.vue，并定义其基本HTML结构：

<template>
  <div class="shuttle">
    <div class="shuttle-left">
      <h2>可选列表</h2>
      <ul>
        <li v-for="item in leftList" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
    <div class="shuttle-buttons">
      <button @click="moveToRight">></button>
      <button @click="moveToLeft"><</button>
    </div>
    <div class="shuttle-right">
      <h2>已选列表</h2>
      <ul>
        <li v-for="item in rightList" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

2. TypeScript逻辑

在Shuttle.vue中，引入TypeScript并构建组件逻辑：

import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'Shuttle',
  props: {
    leftList: {
      type: Array as PropType<Array<{ id: number; name: string }>>,
      required: true,
    },
    rightList: {
      type: Array as PropType<Array<{ id: number; name: string }>>,
      required: true,
    },
  },
  data() {
    return {
      // ...
    }
  },
  methods: {
    moveToRight() {
      // 代码...
    },
    moveToLeft() {
      // 代码...
    },
  },
})

3. 数据和方法

在data()函数中，定义组件的data属性，包括可选列表和已选列表。在methods()函数中，定义moveToRight()和moveToLeft()方法，负责在两个列表之间移动项目。

集成组件

要将穿梭框组件集成到您的应用程序中，请在父组件中引用它并传递适当的props：

<template>
  <Shuttle
    :left-list="leftList"
    :right-list="rightList"
  />
</template>

<script>
import Shuttle from './Shuttle.vue'

export default {
  components: { Shuttle },
  data() {
    return {
      leftList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      rightList: [],
    }
  },
}
</script>