Vue 문서에서 드래그 가능한 구성 요소를 구현하는 방법
- PHPz원래의
- 2023-06-20 14:25:044129검색
Vue는 프런트 엔드 개발을 단순화하기 위한 풍부한 구성 요소와 도구를 제공하는 매우 인기 있는 오픈 소스 JavaScript 프레임워크입니다. 특히 유용한 구성 요소 중 하나는 드래그 가능한 구성 요소입니다. 이 기사에서는 Vue 문서에서 드래그 가능한 구성 요소의 구현을 소개합니다.
Vue는 드래그 기능을 구현하기 위해 draggable이라는 플러그인을 제공합니다. 이 플러그인은 Vue의 모든 요소에 드래그 가능한 기능을 추가할 수 있으며, 드래그 시 이동 범위 제한 및 선택적 정렬과 같은 고급 기능을 지원합니다.
이번 글에서는 Vue-cli와 npm을 사용해 프로젝트를 생성하고 관리해보겠습니다. Vue-cli는 Vue 기반 애플리케이션을 빠르게 만들 수 있는 공식적으로 제공되는 Vue 스캐폴딩 도구입니다.
먼저 명령줄에서 다음 명령을 실행하여 Vue-cli를 설치합니다.
npm install -g vue-clinpm install -g vue-cli
接下来，我们将使用Vue-cli创建一个新的Vue项目：
vue init webpack drag-and-drop
这个命令将使用webpack作为构建工具，创建一个名为drag-and-drop的新Vue项目。在此期间，您可以选择是否安装vue-router、ESLint等其他扩展功能。
安装完成后，可以使用以下命令进入项目所在目录：
cd drag-and-drop
接下来，我们需要安装draggable插件：
npm install vuedraggable
vue init webpack 드래그 앤 드롭이 명령은 webpack을 빌드 도구로 사용하여 드래그 앤 드롭이라는 새 Vue 프로젝트를 생성합니다. 이 기간 동안 vue-router 및 ESLint와 같은 다른 확장 프로그램을 설치할지 여부를 선택할 수 있습니다. 설치가 완료된 후 다음 명령을 사용하여 프로젝트가 있는 디렉터리를 입력할 수 있습니다.
cd drag-and-drop다음으로 드래그 가능한 플러그를 설치해야 합니다. -in:
npm install vuedraggable<p></p>이렇게 하면 드래그 가능한 플러그인의 최신 버전이 설치됩니다. <p></p>이제 Vue 구성 요소에서 드래그 가능한 플러그인을 사용할 수 있습니다. 드래그 가능한 구성 요소를 사용하는 방법을 보여주기 위해 할 일 목록이 포함된 간단한 애플리케이션을 만들어 보겠습니다. 사용자는 작업을 드래그하여 작업 목록을 재정렬할 수 있습니다. <p></p>src/comComponents/TodoList.vue 파일을 열고 다음 코드를 추가하세요. <p><pre class='brush:php;toolbar:false;'><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></pre></p>이 구성 요소는 작업 목록이 포함된 카드를 정의합니다. 우리는 드래그 가능한 구성 요소를 사용하여 각 작업을 드래그 가능하게 만듭니다. <p></p>이 예에서는 v-model 지시문을 사용하여 작업 배열을 바인딩합니다. 이는 작업을 드래그하여 작업 순서를 변경하여 이 배열을 재정렬할 수 있음을 의미합니다. <p></p>"작업 추가" 버튼도 볼 수 있습니다. 이 버튼을 클릭하면 작업 배열에 새 작업이 추가됩니다. 🎜🎜또한 완료되지 않은 작업 수를 계산하기 위해 계산된 속성을 사용했습니다. 🎜🎜마지막으로 애플리케이션에 TodoList 구성 요소를 추가해야 합니다. 🎜🎜src/App.vue 파일을 열고 다음 코드를 추가하세요. 🎜<pre class='brush:php;toolbar:false;'><template>
<div id="app">
<TodoList />
</div>
</template>
<script>
import TodoList from '@/components/TodoList';
export default {
name: 'App',
components: {
TodoList,
}
};
</script></pre>🎜이 구성 요소는 애플리케이션을 정의하고 TodoList 구성 요소를 페이지에 추가합니다. 🎜🎜축하합니다. Vue를 사용하여 드래그 앤 드롭으로 정렬할 수 있는 할 일 목록을 성공적으로 만들었습니다. 🎜🎜Vue-cli 및 드래그 가능한 플러그인은 강력한 Vue 애플리케이션을 구축하기 위한 강력한 도구입니다. 하지만 이 글에서는 Vue의 드래그 앤 드롭 기능을 실제 애플리케이션에서 사용하고 싶다면 필요에 맞게 적용하고 수정해야 한다는 점을 참고하시기 바랍니다. 🎜위 내용은 Vue 문서에서 드래그 가능한 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!