工作积累

# 拖拽和拉升组件大小

  1. npm run vue3-draggable-resizable --s
  2. 组件内操作
<DraggableContainer>
  <Vue3DraggableResizable
              class="sz"
              :initW="getobj(item).w"  //初始化的宽度
              :initH="getobj(item).h"  //初始化的高度
              v-model:x="getobj(item).x" // 监听了x 坐标变化
              @resize-end="resizeEnd"     #调整大小触发   
              v-model:y="getobj(item).y"
              v-model:w="getobj(item).w"
              v-model:h="getobj(item).h"
              @activated="activatedHandle(item)"
            >
              <img
                src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/ksQRcode/i33NSkpmhxYYemrR1658226093440.jpg"
                class="QRcodeimg fz32 vertical-center"
              />
            </Vue3DraggableResizable>
</DraggableContainer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue3DraggableResizable from "vue3-draggable-resizable";
import { DraggableContainer } from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
1
2
3
4

Vue3DraggableResizable

npm version (opens new window) Software License npm (opens new window) vue version (opens new window)

[ Vue3 Component ] Draggable and resizable component for vue3

# Features

  • At present, only "draggable" feature is supported, I will update the "resizable" feature as soon as possible.

# Usage

$ npm install vue3-draggable-resizable
1

Register the Vue3DraggableResizable

// >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
// You will have a global component named "Vue3DraggableResizable"
createApp(App).use(Vue3DraggableResizable).mount('#app')
1
2
3
4
5
6
7
8

You can also use it separately within the component

// >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
    components:{ Vue3DraggableResizable },
    // ...other
})
1
2
3
4
5
6
7
8
9

Here is a complete example of using "vue-template"

<template>
  <div id="app">
    <div class="parent">
      <Vue3DraggableResizable
        :initW="110"
        :initH="120"
        v-model:x="x"
        v-model:y="y"
        v-model:w="w"
        v-model:h="h"
        v-model:active="active"
        :draggable="true"
        :resizable="true"
        @activated="print('activated')"
        @deactivated="print('deactivated')"
        @drag-start="print('drag-start')"
        @resize-start="print('resize-start')"
        @dragging="print('dragging')"
        @resizing="print('resizing')"
        @drag-end="print('drag-end')"
        @resize-end="print('resize-end')"
      >
        This is a test example
      </Vue3DraggableResizable>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
  components: { Vue3DraggableResizable },
  data() {
    return {
      x: 100,
      y: 100,
      h: 100,
      w: 100,
      active: false
    }
  },
  methods: {
    print(val) {
      console.log(val)
    }
  }
})
</script>
<style>
.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# Props

# initW

type: Number
default: null

Set initial width(px)

<vue3DraggableResizable :initW="100"/>
1

# initH

type: Number
default: null

Set initial height(px)

<vue3DraggableResizable :initH="100"/>
1

# w

type: Number
default: 0

Current width(px) of the container.
You can use "v-model:w" to keeps it up-to-date

<vue3DraggableResizable v-model:w="100"/>
1

# h

type: Number
default: 0

Current height(px) of the container.
You can use "v-model:h" to keeps it up-to-date

<vue3DraggableResizable v-model:h="100"/>
1

# x

type: Number
default: 0

Current left(px) of the container.
You can use "v-model:x" to keeps it up-to-date

<vue3DraggableResizable v-model:x="100"/>
1

# y

type: Number
default: 0

The current top(px) of the container.
You can use "v-model:y" to keeps it up-to-date

<vue3DraggableResizable v-model:y="100"/>
1

# minW

type: Number
default: 20

Minimum width(px)

<vue3DraggableResizable :minW="100"/>
1

# minH

type: Number
default: 20

Minimum height(px)

<vue3DraggableResizable :minH="100"/>
1

# active

type: Boolean
default: false

Indicates whether the component is selected.
You can use "v-model:active" to keeps it up-to-date

<vue3DraggableResizable v-model:active="100"/>
1

# draggable

type: Boolean
default: true

Defines the component can be draggable or not

<vue3DraggableResizable :draggable="true"/>
1

# resizable

type: Boolean
default: true

Defines the component can be resizable or not

<vue3DraggableResizable :draggable="true"/>
1

# Events

# activated

payload: -

<vue3DraggableResizable @activated="activatedHandle"/>
1

# deactivated

payload: -

<vue3DraggableResizable @deactivated="deactivatedHandle"/>
1

# drag-start

payload: { x: number, y: number, w: number, h: number }

<vue3DraggableResizable @drag-start="dragStartHandle"/>
1

# dragging

payload: { x: number, y: number, w: number, h: number }v

<vue3DraggableResizable @dragging="dragStartHandle"/>
1

# drag-end

payload: { x: number, y: number, w: number, h: number }

<vue3DraggableResizable @drag-end="dragEndHandle"/>
1

# resize-start

payload: { x: number, y: number, w: number, h: number }

<vue3DraggableResizable @resize-start="resizeStartHandle"/>
1

# resizing

payload: { x: number, y: number, w: number, h: number }v

<vue3DraggableResizable @resizing="resizingHandle"/>
1

# resize-end

payload: { x: number, y: number, w: number, h: number }

<vue3DraggableResizable @resize-end="resizeEndHandle"/>
1

← 打印 →