Vue ドキュメントでドラッグ可能なコンポーネントを実装する方法

Vue は、フロントエンド開発を簡素化するための豊富なコンポーネントとツールを提供する非常に人気のあるオープンソース JavaScript フレームワークです。特に便利なコンポーネントの 1 つは、ドラッグ可能なコンポーネントです。この記事では、Vue ドキュメントでのドラッグ可能なコンポーネントの実装について紹介します。

Vue は、ドラッグ機能を実装するために、draggable というプラグインを提供します。このプラグインは、Vue の任意の要素にドラッグ可能な機能を追加でき、オプションの並べ替えやドラッグ時の移動範囲の制限などの高度な機能をサポートします。

この記事では、Vue-cli と npm を使用してプロジェクトを作成および管理します。 Vue-cli は、Vue ベースのアプリケーションを迅速に作成できる、公式に提供される Vue スキャフォールディング ツールです。

まず、コマンド ラインで次のコマンドを実行して Vue-cli をインストールします。

npm install -g vue-cli

次に、 Vue-cli を使用して新しい Vue プロジェクトを作成します:

vue init webpack ドラッグ アンド ドロップ

このコマンドは、webpack をビルド ツールとして使用し、プロジェクトを作成しますドラッグ アンド ドロップ用の New Vue プロジェクトという名前が付けられます。この期間中に、vue-router や ESLint などの他の拡張機能をインストールするかどうかを選択できます。

インストールが完了したら、次のコマンドを使用して、プロジェクトが配置されているディレクトリに移動できます:

cd ドラッグ アンド ドロップ

次に、ドラッグ可能なプラグインをインストールする必要があります。

npm install vedraggable

これにより、ドラッグ可能なプラグインの最新バージョンがインストールされます。

これで、Vue コンポーネントでドラッグ可能なプラグインを使用できるようになりました。ドラッグ可能なコンポーネントの使用方法を示すために、To-Do リストを含む単純なアプリケーションを作成します。ユーザーはタスクをドラッグしてタスク リストの順序を変更できます。

src/components/TodoList.vue ファイルを開き、次のコードを追加します。

<template>
  <div>
    <h2>待办事项列表</h2>
    <draggable v-model="tasks">
      <div v-for="(task,index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed">
        <span>{{ task.title }}</span>
      </div>
    </draggable>
    <button @click="addTask()">添加任务</button>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'TodoList',
  components: {
    draggable,
  },
  data() {
    return {
      tasks: [
        { title: '完成Vue项目', completed: false },
        { title: '阅读Vue文档', completed: true },
        { title: '学习JavaScript', completed: false },
      ],
    };
  },
  methods: {
    addTask() {
      this.tasks.push({
        title: '新增任务',
        completed: false,
      });
    },
  },
};
</script>

このコンポーネントは、タスク リストを含むカードを定義します。ドラッグ可能なコンポーネントを使用して、各タスクをドラッグ可能にします。

この例では、v-model ディレクティブを使用してタスク配列をバインドします。これは、タスクをドラッグすることでこの配列を並べ替えることができ、それによってタスクの順序を変更できることを意味します。

「タスクの追加」ボタンも表示されます。このボタンをクリックすると、新しいタスクがタスク配列に追加されます。

また、computed 属性を使用して、未完了のタスクの数を計算します。

最後に、TodoList コンポーネントをアプリケーションに追加する必要があります。

src/App.vue ファイルを開き、次のコードを追加します。

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script>
import TodoList from '@/components/TodoList';

export default {
  name: 'App',
  components: {
    TodoList,
  }
};
</script>

このコンポーネントはアプリケーションを定義し、TodoList コンポーネントをページに追加します。

おめでとうございます。Vue でドラッグ アンド ドロップで並べ替えることができる To Do リストが正常に作成されました。

Vue-cli とドラッグ可能なプラグインは、強力な Vue アプリケーションを構築するための強力なツールです。ただし、この記事では基本的な例を示しているだけなので、実際のアプリケーションで Vue のドラッグ アンド ドロップ機能を使用する場合は、ニーズに合わせて適用および修正する必要があります。

以上がVue ドキュメントでドラッグ可能なコンポーネントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。