npm 包 amisyura-vue-draggable-resizable 使用教程-JavaScript中文网-JavaScript教程资源分享门户

amisyura-vue-draggable-resizable 是一个可以让用户通过拖拽和改变大小来交互的 Vue 组件。这个组件非常适用于那些需要用户可以自由排布的项目中。在这篇文章中，我们将深入地探讨这个 npm 包的使用方法，以及如何将其集成到你的项目中。

前置知识

在阅读这篇教程之前，我们假设你已经有了以下技能：

基本的 Vue.js 知识：如何在 Vue.js 中创建组件、组件的生命周期、如何使用组件内的 props 和 emit 事件等。
npm 包管理及使用基础：如何安装/卸载 npm 套件，如何导入 npm 包以及在项目中使用这些包等。

安装 amisyura-vue-draggable-resizable

首先，我们需要安装这个 npm 包。安装包的命令如下：

npm install --save amisyura-vue-draggable-resizable

在 Vue 项目中使用 amisyura-vue-draggable-resizable

当 npm 包安装完成之后，我们就可以在 Vue 项目中使用它了。下面我们将具体介绍如何使用。

引入并注册组件

在单个 Vue 组件或全局注册组件中引用 amisyura-vue-draggable-resizable，你需要：

在你的 Vue 组件文件（例如 MyComponent.vue）中导入组件：

import AmisyuraVueDraggableResizable from "amisyura-vue-draggable-resizable";

在 Vue 组件中注册该组件：

export default {
  components: {
    AmisyuraVueDraggableResizable,
  },
};

注意：如果你全局注册了该组件，那么你可以省略组件注册步骤。

配置组件

amisyura-vue-draggable-resizable 只接收一些 prop 来配置组件的行为。具体属性如下：

Property	Type	Default Value	Description
`x`	Number	0	初始 X 坐标
`y`	Number	0	初始 Y 坐标
`w`	Number	200	初始宽度值
`h`	Number	200	初始高度值
`minWidth`	Number	报错	组件的最小宽度
`minHeight`	Number	报错	组件的最小高度
`maxWidth`	Number	10000	组件的最大宽度
`maxHeight`	Number	10000	组件的最大高度
`zIndex`	Number	0	组件 z-index 的值。可以用来更改组件的叠放顺序。
`grid`	Array或Object	[]	缩放和拖动时的栅格
`bounds`	Array或Object	`[0, 0]`	组件可以被拖动的最大 x, y 坐标。值的格式是一个数组。
`preventDeactivation`	Boolean or String	false	防止拖动、缩放或双击事件来取消激活。可以是布尔类型或者选择器
`isActive`	Boolean	false	组件可激活
`canDragX`	Boolean	true	是否能够进行水平拖拽
`canDragY`	Boolean	true	是否能够进行垂直拖拽
`canResizeTop`	Boolean	true	是否可以向上调整高度
`canResizeRight`	Boolean	true	是否可以向右调整高度
`canResizeBottom`	Boolean	true	是否可以向下调整高度
`canResizeLeft`	Boolean	true	是否可以向左调整高度
`maxRight`	Number	false	限制调整大小的最大值
`maxBottom`	Number	false	限制调整大小的最大值
`minLeft`	Number or Boolean	0 or `false`	限制调整的最小宽度
`minTop`	Number or Boolean	0 or `false`	限制调整的最小高度
`moveOnStartDrag`	Boolean	true	是否允许拖拽时移动窗口
`moveOnResize`	Boolean	false	是否在尺寸调整时移动窗口
`fitparent`	Boolean	true	是否尝试自适应容器大小
`parent`	Boolean/String	false	限制大小和位置的父容器
`document`	Boolean	true	是否在整个文档中禁止拖动。如果设置为 false，则容器会从其父容器中限制
`ratio`	Boolean	false	是否启用调整大小时的纵横比约束
`ratioSnap`	Boolean	true	是否强制比率锁定snap到 IncrementGrid
`snap`	Object		在拖动和缩放时对齐边缘可见基准线
`useBoundingClientRect`	Boolean	false	是否使用通过 getBoundingClientRect 获取的位置信息。

这些属性中，尤其需要注意 preventDeactivation 属性，它可以告诉 amisyura-vue-draggable-resizable 在何时不应该让该组件失活（意思是不要取消选定该组件的操作，如拖动或缩放）。你需要使用一个CSS选择器字符串作为它的值。例如，为了确保在拖动该组件时不会取消选定该组件，你的属性应该像这样：

<amisyura-vue-draggable-resizable prevent-deactivation="dragging" />

要防止拖动和双击取消激活，请使用以下属性：

<amisyura-vue-draggable-resizable prevent-deactivation=".class-name" />

使用组件并监听事件

在配置完成后，我们可以自由使用该组件。下面是一个完整的使用示例：

-- -------------------- ---- -------
----------
  -----
    ---------------------------------
      --------
      --------
      -------------------------------
      ---------------------------
    -
      -----------------
    -----------------------------------
  ------
-----------

--------
------ ----------------------------- ---- -----------------------------------

------ ------- -
  ----------- -
    ------------------------------
  --
  -------- -
    -------------------------- -
      --------------------- --- -------- -- --------------- -----------------
    --
    ------------------------ -
      --------------------- --- -------- -- --------------- -----------------
    --
  --
--
---------

在上述代码中，我们使用了：

:w="200" 和 :h="200" 来展示初始的窗口大小。
@resize-stop="handleResizeStop" 和 handleDragStop="handleDragStop" 来监听组件的 resize 和 drag 事件。
handleResizeStop() 和 handleDragStop() 将输出组件的最新位置。

总结

在本文中，我们为初学者提供了使用 amisyura-vue-draggable-resizable 的详细说明。如果你是有经验的开发者，你可能已经发现这个库可以用在很多实用的场合，希望这篇文章能够帮助你在使用它时更加得心应手。

附：GitHub 地址：https://github.com/amisyura/vue-draggable-resizable。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056ce781e8991b448e69ae