文章目录
- 前言
- 一、基础了解
- 1、Vue 3
- 2、TypeScript
- 3、Element Plus
- 4、SortableJs
- 二、SortableJs的安装
- 1、SortableJs安装
- 2、SortableJs类型安装
- 三、代码封装
- 1、自定义指令 draggable
- 2、自定义指令 draggable 值类型定义
- 3、自定义指令入口定义
- 4、使用
- 四、示例
- 五、结语
前言
徐小宝：本文仅以经验指南，实现拖拉拽效果，涉及TypeScript、Elment Plus、SortableJs 等，以表格为例讲演。
一、基础了解
主要了解本文涉及的框架、语言、工具等，了解其基本内容。
1、Vue 3
- Vue 3官网传送门
- Vue 2官网传送门
- Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
- Vue 3是Vue 2的重构版本，引入了诸如组合式API、多根节点、Teleport等新特性。
- Vue 2 将于 2023 年 12 月 31 日 停止维护。
2、TypeScript
- TypeScript官网传送门
- TypeScript 是 JavaScript 的一个超集，具有强类型，静态代码检测等特性
- 可以编译成 JavaScript 以运行在任意浏览器之中。
- TypeScript 是一种基于 JavaScript 构建的强类型编程语言，可为您提供任何规模的更好工具。
3、Element Plus
- Element Plus官网传送门
- 一款基于 Vue 3，面向设计师和开发者的组件库
- 由于 Vue 3 的原因，不再支持IE11浏览器
4、SortableJs
- SortableJs官网传送门
- 一款功能强大的JavaScript 拖拽库
- 基于原生HTML5中的拖放API
- API使用简单，兼容性强
- 不依赖Jquery等其他框架
- 支持多种框架（angular、vue、react等）
二、SortableJs的安装
1、SortableJs安装
npm i sortablejs
pnpm add sortablejs
yarn add sortablejs
2、SortableJs类型安装
为了在TypeScript下有代码提示，且不会找不到模块
npm i @types/sortablejs -D
pnpm add @types/sortablejs -D
yarn add @types/sortablejs -D
三、代码封装
1、自定义指令 draggable
// FilePath: src/directives/draggable/index.ts
import type { DraggableOption } from '@/directives/draggable/types';
import Sortable from 'sortablejs';
import type { Directive, DirectiveBinding } from 'vue';
const draggable: Directive = {
mounted(el: HTMLElement, binding: DirectiveBinding) {
const options: DraggableOption[] = binding.value;
options.forEach(item => {
new Sortable(el.querySelector(item.selector) as HTMLElement, item.options);
});
}
};
export default draggable;
2、自定义指令 draggable 值类型定义
// FilePath: src/directives/draggable/types.ts
import type Sortable from 'sortablejs';
export interface DraggableOption {
selector: string;
options: Sortable.Options;
}
3、自定义指令入口定义
// FilePath: src/directives/index.ts
import type { App } from 'vue';
import draggable from './draggable';
const directives = {
draggable
};
const install = (app: App) => {
Object.keys(directives).forEach(key => {
app.directive(key, directives[key as keyof typeof directives]);
});
};
export default {
install
};
4、使用
- 全局注册自定义指令 draggable
// FilePath: main.ts
import Directives from '@/directive';
import { createApp } from 'vue';
import App from './App.vue';
app.use(Directives);
- 局部引入自定义指令 draggable
在 < script setup> 中注册
import vDraggable from '@/directives/draggable';
非 < script setup> 中注册
import draggable from '@/directives/draggable';
export default {
setup(){
/*...*/
},
directives: {
draggable
}
}
四、示例
<template>
<el-table :data="data" v-draggable="draggableOptions">
<el-table-column type="index" label="序号" align="center" width="50" />
<el-table-column prop="name" label="姓名" align="center" />
</el-table>
</template>
<script setup lang="ts">
import type { SortableEvent } from 'sortablejs';
import { nextTick, onBeforeMount, ref } from 'vue';
interface DemoData {
name: string;
age: number;
}
ononBeforeMount(() => {
getData(10);
});
const demoData = ref<DemoData[]>([]);
const getData = (length: number) => {
demoData.value = Array.from({ length }).map((_, index) => ({
name: `张三-${index}`
age: index * 2
}))
};
const draggableOptions = [{
selector: 'tbody',
options: {
animation: 150,
onEnd: (evt: SortableEvent) => {
const { newIndex, oldIndex } = evt;
const arr: DemoData[] = [...demoData.value];
// 拖动元素与新位置原元素互换位置
// ES6 解构写法
// [arr[newIndex as number],arr[oldIndex as number]] = [arr[oldIndex as number],arr[newIndex as number]]
// ES5 普通写法
// arr.splice(newIndex as number,1, ...arr.splice(oldIndex as number,1,arr[newIndex as number]))
// 拖动元素至新位置后其余依次下移
const [moveRowData] = [...arr.splice(oldIndex as number, 1)];
arr.splice(newIndex as number, 0, moveRowData);
demoData.value = [];
nextTick(() => {
demoData.value = [...arr];
});
}
}
}];
</script>
五、结语
本文仅以Vue 3+TypeScript+Elment Plus+SortableJs 环境下，使用Vue自定义指令实现表格拖拽效果，其他框架及元素(HTMLElment) 可自行理解后实现，验证后欢迎私聊扩充示例代码。
如有问题或不到之处，欢迎评论留言。
