Vue3 Resizable

✨ Features

• Compatibility: Compatible with server-rendered apps, PC, and mobile devices.

• Resizable Component: Allows elements to be resized with optional constraints. It supports the following features:

• 可定制的调整轴（“x”、“y”或“两者都有”）。

• 可选锁定纵横比。 -最小和最大尺寸限制。

• 可定制的调整大小手柄，包括使用自定义 Vue 组件或函数作为手柄的能力。

• 与可拖动组件（“DraggableCore”）集成，可平滑调整大小。

• 发出调整大小开始、调整大小和调整大小停止的事件，允许自定义逻辑和集成。

• 支持变换比例调整，这对已变换父级中的图元很有用。

• ResizableBox Component:

• “可调整大小”组件的所有功能。

• 通过反应状态直接控制框的大小，在调整大小操作期间自动更新大小。

• 轻松与插槽集成，将自定义内容放置在可调整大小的框内。

• 预定义样式可立即使用，并可通过道具覆盖或扩展这些样式。

Quick Start

Step 1: Installation

npm install @v3layout/vue3-resizable

or if you prefer using Yarn:

yarn add @v3layout/vue3-resizable

or if you prefer using Pnpm:

pnpm add @v3layout/vue3-resizable

Step 2: Importing

In your vue3 component, import @v3layout/vue3-resizable:

import { ResizableBox, Resizable } from "@v3layout/vue3-resizable";

Step 3: Using @v3layout/vue3-resizable

Now, you can use the Draggable component in your vue3 application. Wrap any element with <Draggable> to make it draggable:

<template>
  <ResizableBox className="box" :width="200" :height="200">
    <span class="text">I can now resize the box</span>
  </ResizableBox>
</template>

<script>
import { ResizableBox } from "@v3layout/vue3-resizable";

export default {
  components: {
    ResizableBox,
  },
};
</script>

<style></style>

Step 4: Enjoy!

That's it! You've successfully integrated resizable functionality into your vue3 application. Customize it further according to your needs.

A simple component for making elements resizable box.

<ResizableBox className="box" :width="200" :height="200">
  <span class="text">{{"<ResizableBox>"}}</span>
</ResizableBox>

<Resizable>

const {Resizable} = require('@v3layout/vue3-resizable');

// ES6
import { Resizable } from '@v3layout/vue3-resizable';

const Example = defineComponent({
  const state = reactive({
    width: 200,
    height: 200
  });
  setup () {
    const onResize = (event, {node, size, handle}) => {
    state.width = size.width
    state.height = size.height
    };
    return () => (
      <Resizable height={this.state.height} width={this.state.width} fnResize={this.onResize}>
        <div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
          <span>Contents</span>
        </div>
      </Resizable>
    )
  }
})

<ResizableBox>

const {ResizableBox} = require('@v3layout/vue3-resizable');

// ES6
import { ResizableBox } from '@v3layout/vue3-resizable';

const Example = defineComponent({
  const state = reactive({
    width: 200,
    height: 200
  });
  setup () {
    const onResize = (event, {node, size, handle}) => {
    state.width = size.width
    state.height = size.height
    };
    return () => (
      <ResizableBox width={200} height={200} draggableOpts={{grid: [25, 25]}}
          minConstraints={[100, 100]} maxConstraints={[300, 300]}>
        <span>Contents</span>
      </ResizableBox>
    )
  }
})

Props

这些道具适用于“”和“”。不在下面列表中的未知道具将传递给子组件。

type ResizeCallbackData = {
  node: HTMLElement,
  size: {width: number, height: number},
  handle: ResizeHandleAxis
};
type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';

type ResizableProps {
    axis: 'both' | 'x' | 'y' | 'none' = 'both',
    className?: string,
    draggableOpts?: Object,
    handle?: ((resizeHandleAxis: ResizeHandleAxis) => VNode) | VNode,
    handleSize: [number, number],
    lockAspectRatio: boolean,
    minConstraints: [number, number],
    maxConstraints: [number, number],
    fnResizeStop?: (e: Event, data: ResizeCallbackData) => void,
    fnResizeStart?: (e: Event, data: ResizeCallbackData) => void,
    fnResize?: (e: Event, data: ResizeCallbackData) => void,
    resizeHandles: ResizeHandleAxis[],
    transformScale: number,
    width: number,
    height: number,
    hoverHandles?: boolean
  }

The following props can also be used on <ResizableBox>:

{
  style?: Object
}

如果将“width”或“height”传递给“”的“style”道具，则会被忽略，因为这是内部函数所必需的。

####调整手柄大小

如果重写 resize 句柄，我们希望传递给新句柄的任何ref都表示底层 DOM 元素。

这是必需的，因为“vue3 resizable”必须能够访问底层 DOM 节点以附加处理程序并测量位置增量。

有几种方法可以做到这一点：

Native DOM Element

<Resizable handle={<div class="foo" />} />

Custom Function

你可以将一个函数定义为句柄，它只会接收一个轴（见上面的ResizeHandleAxis类型）和引用。这可能更容易阅读，具体取决于你的编码风格。

const MyHandle = (props) => {
  return <div ref={props.innerRef} className="foo" {...props} />;
};

<Resizable
  handle={(handleAxis, ref) => (
    <MyHandle
      innerRef={ref}
      className={`foo handle-${handleAxis}`}
      {...props}
    />
  )}
/>;

License

MIT