Vue 3+TypeScript+Elment Plus+SortableJs 自定义指令实现拖拽效果

文章目录

  • 前言
  • 一、基础了解
    • 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) 可自行理解后实现,验证后欢迎私聊扩充示例代码。

如有问题或不到之处,欢迎评论留言。

你可能感兴趣的:(笔记,HTML笔记,vue.js,typescript,elementui)