YAAT-Yat Another ActionTab开发(1)—— 拖拉拽组件

boyanx3个月前 (05-08)技术教程22

前段时间使用了一下ActionTab感觉这个产品，小编也想向这个产品学习学习，自己开发一个工具箱。就当是学习总结之用了，有兴趣的小伙伴可以私信小编获取代码，后续等功能界面稍微成型了再放到github上开源（现在有些拿不出手）~~~

今天想实现的样子

我感觉便利贴应该算是ActionTab上比较方便的功能，因此我们也从便利贴功能组件开始。
便利贴功能需要做到两点：可拖拉拽；可缩放；用户可输入。效果如下：

拖拉拽组件

拖拉拽组件很早之前也看过一些实现方法，HTML元素本身就是有个draggable的属性的，不过实现起来都比较麻烦，为什么不站在巨人的肩膀上呢？行吧，那就站在巨人的肩膀上吧。。。
我们选择的可拖拉拽的组件叫：vue3-draggable-resizable，安装命令如下：

npm i vue3-draggable-resizable

这个组件的使用也非常简单，以下是这个组件的大致用法。

// JS代码
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
import Vue3DraggableResizable from "vue3-draggable-resizable";

// 模板代码
<Vue3DraggableResizable
    :initW="props.config.w"
    :initH="props.config.h"
    v-model:x="props.config.x"
    v-model:y="props.config.y"
    v-model:w="props.config.w"
    v-model:h="props.config.h"
    :draggable="true"
    :resizable="true"
    @activated="print('activated')"
    @deactivated="print('deactivated')"
    @drag-start="print('drag-start')"
    @drag-end="console.log"
    @resize-start="(e) => emits('resizeStart', e)"
    @resizing="(e) => emits('resizing', e)"
    @resize-end="(e) => emits('resizeEnd', e)"
    class="drag-item">
    // 内容区
  </Vue3DraggableResizable>

实现原理

通过上面的Vue3DraggableResizable+textarea实现便利贴可拖拽、可缩放功能。
textarea元素无法实现根据Vue3DraggableResizable的缩放自动调整宽度和高度，因此需要需要监听Vue3DraggableResizable的缩放事件从而计算出textarea的高度（宽度固定）。

const resizeTextArea = () => {
  const targetParent = textareaRef.value?.closest(".drag-item");
  if (targetParent == null) {
    return;
  }

  const parentHeight = targetParent?.clientHeight;
  if (!parentHeight) {
    return;
  }
  const textareaHeight = parentHeight - props.config.headerHeight - 10 - 5;
  textareaRef.value!.style.height = `${textareaHeight}px`;
};
// 稍微增加个防抖功能，降低调用次数
const debouncedResizeTextArea = _.debounce(resizeTextArea, 10);

// 事件监听
@resize-start="debouncedResizeTextArea"
@resizing="debouncedResizeTextArea"
@resize-end="debouncedResizeTextArea"

其中的props.config.headerHeight - 10 - 5;当前可拖拽组件的头高度以及textarea自己的margin和padding。

其他

这块功能简单，最大的成本反而是在调样式上。
下一步小编将会把用户的便利签数据存储到浏览器的indexDB上（小编会选择用pinia获得响应式能力，同时借助小编之前的一篇pinia持久化的文章将数据持久化到indexdb中），再往后我们可以将便签数据存储到后端（需要借助服务端的代码）.
测试地址，有啥建议也一定请给小编留言：