vue如何拖动改变组件大小

Vue拖动调整大小 (Vue-drag-resize)

Vue Component for resize and drag elements.

Vue组件，用于调整大小和拖动元素。

特征 (Features)

• A lightweight, no-dependency

  轻巧，无依赖

• Use draggable, resizable or both

  使用可拖动，可调整大小或同时使用

• Define sticks for resizing

  定义棒以调整大小

• Save aspect ratio for resizable components

  为可调整大小的组件保存长宽比

• Restrict size and movement to parent element

  限制尺寸和移动到父元素

• Restrict drag to vertical or horizontal axis

  限制拖动到垂直或水平轴

安装和基本用法 (Install and basic usage)

$ npm i -s vue-drag-resize

Register the component:

注册组件：

import Vue from 'vue'
import VueDragResize from 'vue-drag-resize'

Vue.component('vue-drag-resize', VueDragResize)

Use the component:

使用组件：

<template>
    <div id="app">
        <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
            <h3>Hello World!</h3>
            <p>{{ top }} х {{ left }} </p>
            <p>{{ width }} х {{ height }}</p>
        </VueDragResize>
    </div>
</template>

<script>
    import VueDragResize from 'vue-drag-resize';

    export default {
        name: 'app',

        components: {
            VueDragResize
        },

        data() {
            return {
                width: 0,
                height: 0,
                top: 0,
                left: 0
            }
        },

        methods: {
            resize(newRect) {
                this.width = newRect.width;
                this.height = newRect.height;
                this.top = newRect.top;
                this.left = newRect.left;
            }
        }
    }
</script>

道具 (Props)

活跃 (isActive)

Type: Boolean Required: false Default: false

类型： Boolean必需： false默认值： false

Determines whether the component should be active.

确定组件是否应该处于活动状态。

<vue-drag-resize :isActive="true">

isDraggable (isDraggable)

Type: Boolean Required: false Default: true

类型： Boolean必需： false默认值： true

Determines whether the component should draggable.

确定组件是否应拖动。

<vue-drag-resize :isDraggable="false">

isResizable (isResizable)

Type: Boolean Required: false Default: true

类型： Boolean必需： false默认值： true

Determines whether the component should resize.

确定组件是否应该调整大小。

<vue-drag-resize :isResizable="false">

父母限制 (parentLimitation)

Type: Boolean Required: false Default: false

类型： Boolean必需： false默认值： false

Limits the scope of the component's change to its parent size.

将组件更改的范围限制为其父大小。

<vue-drag-resize :parentLimitation="true">

AspectRatio (aspectRatio)

Type: Boolean Required: false Default: false

类型： Boolean必需： false默认值： false

Determines whether the component should retain its proportions.

确定组件是否应保留其比例。

<vue-drag-resize :aspectRatio="false">

w (w)

Type: Number Required: false Default: 200

类型： Number必需： false默认值： 200

Define the initial width of the component.

定义组件的初始宽度。

<vue-drag-resize :w="200">

H (h)

Type: Number Required: false Default: 200

类型： Number必需： false默认值： 200

Define the initial height of the component.

定义组件的初始高度。

<vue-drag-resize :h="200">

w (minw)

Type: Number Required: false Default: 50

类型： Number必需： false默认值： 50

Define the minimal width of the component.

定义组件的最小宽度。

<vue-drag-resize :minw="50">

h (minh)

Type: Number Required: false Default: 50

类型： Number必需： false默认值： 50

Define the minimal height of the component.

定义组件的最小高度。

<vue-drag-resize :minh="50">

X (x)

Type: Number Required: false Default: 0

类型： Number必需： false默认值： 0

Define the initial x position of the component.

定义组件的初始x位置。

<vue-drag-resize :x="0">

ÿ (y)

Type: Number Required: false Default: 0

类型： Number必需： false默认值： 0

Define the initial y position of the component.

定义组件的初始y位置。

<vue-drag-resize :y="0">

ž (z)

Type: Number|String Required: false Default: auto

类型： Number|String必需： false缺省值： auto

Define the zIndex of the component.

定义组件的zIndex。

<vue-drag-resize :z="999">

棍棒 (sticks)

Type: Array Required: false Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

类型： Array必需： false默认值： ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

Define the array of handles to restrict the element resizing:

定义句柄数组以限制元素的大小调整：

• tl - Top left

  tl左上方

• tm - Top middle

  tm中上层

• tr - Top right

  tr右上方

• mr - Middle right

  mr -右中

• br - Bottom right

  br -右下

• bm - Bottom middle

  bm底部中间

• bl - Bottom left

  bl左下

• ml - Middle left

  ml左中

<vue-drag-resize :sticks="['tm','bm','ml','mr']">

轴 (axis)

Type: String Required: false Default: both

类型： String必需： false默认值： both

Define the axis on which the element is draggable. Available values are x, y, both or none.

定义可拖动元素的轴。 可用的值是x ， y ， both none 。

<vue-drag-resize axis="x">

---

---

大事记 (Events)

活性 (activated)

Required: false Parameters: -

必需： false参数： -

Called whenever the component gets clicked, in order to show handles.

每当显示组件时，都单击该组件以调用手柄。

<vue-drag-resize @activated="onActivated">

停用 (deactivated)

Required: false Parameters: -

必需： false参数： -

Called whenever the user clicks anywhere outside the component, in order to deactivate it.

每当用户单击组件外部的任何位置以将其停用时都会调用。

<vue-drag-resize @deactivated="onDeactivated">

调整大小 (resizing)

Required: false Parameters: object

必需： false参数： object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component gets resized.

每当调整组件大小时调用。

<vue-drag-resize @resizing="onResizing">

调整大小 (resizestop)

Required: false Parameters: object

必需： false参数： object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component stops getting resized.

每当组件停止调整大小时调用。

<vue-drag-resize @resizestop="onResizstop">

拖曳 (dragging)

Required: false Parameters: object

必需： false参数： object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component gets dragged.

每当拖动组件时调用。

<vue-drag-resize @dragging="onDragging">

拖曳停止 (dragstop)

Required: false Parameters: object

必需： false参数： object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component stops getting dragged.

每当组件停止拖动时调用。

<vue-drag-resize @dragstop="onDragstop">

贡献 (Contributing)

Any contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.

非常欢迎对代码或文档的任何部分做出任何贡献，并提出任何想法和/或建议。

# serve with hot reload at localhost:8081
npm run start

# distribution build
npm run build

翻译自: https://vuejsexamples.com/vue-component-for-draggable-and-resizable-elements/

vue如何拖动改变组件大小