Vue3DraggableResizable

[Forks https://github.com/a7650/vue3-draggable-resizable](https://github.com/a7650/vue3-draggable-resizable)

[Vue3 компонент] Компонент для перетаскивания и изменения размера, поддерживающий конфликтную проверку, адсорбцию и выравнивание элементов, а также реальные линии отсчета. [Vue3 Component] Компонент для перетаскивания и изменения размера для Vue3, поддерживающий адсорбцию и выравнивание элементов, реальные линии отсчета и т.д.

Перейти к русской документации

Особенности

Перетаскивание и изменение размера
Определение ручек для изменения размера
Ограничение движения и размера в родительском узле
Настройка различных имен классов
Предоставление собственной разметки для ручек
Адсорбция и выравнивание
Линия отсчета### Использование

$ npm install @v3e/vue3-draggable-resizable

Регистрация Vue3DraggableResizable

// >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from '@v3e/vue3-draggable-resizable'
//default styles
import '@v3e/vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

// Вы получите глобальный компонент с именем "Vue3DraggableResizable"
createApp(App)
  .use(Vue3DraggableResizable)
  .mount('#app')

Вы также можете использовать его отдельно внутри компонента

// >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from '@v3e/vue3-draggable-resizable'
//default styles
import '@v3e/vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

Вот полный пример использования "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')"
      >
        Это тестовый пример
      </Vue3DraggableResizable>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from '@v3e/vue3-draggable-resizable'
//default styles
import '@v3e/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>
```### Пропсы

#### initW

Тип: `Number`<br>
По умолчанию: `null`<br>

Устанавливает начальную ширину (в пикселях)

```html
<Vue3DraggableResizable :initW="100" />

initH

Тип: Number
По умолчанию: null

Устанавливает начальную высоту (в пикселях)

<Vue3DraggableResizable :initH="100" />

w

Тип: Number
По умолчанию: 0

Текущая ширина (в пикселях) контейнера.
Вы можете использовать "v-model:w", чтобы поддерживать актуальность

<Vue3DraggableResizable v-model:w="100" />

h

Тип: Number
По умолчанию: 0

Текущая высота (в пикселях) контейнера.
Вы можете использовать "v-model:h", чтобы поддерживать актуальность

<Vue3DraggableResizable v-model:h="100" />

x

Тип: Number
По умолчанию: 0

Текущее значение left (в пикселях) контейнера.
Вы можете использовать "v-model:x", чтобы поддерживать актуальность

<Vue3DraggableResizable v-model:x="100" />

y

Тип: Number
По умолчанию: 0

Текущее расстояние сверху контейнера (в пикселях).
Вы можете использовать "v-model:y", чтобы поддерживать его актуальность.

<Vue3DraggableResizable v-model:y="100" />

minW

Тип: Number
По умолчанию: 20

Минимальная ширина контейнера (в пикселях).

<Vue3DraggableResizable :minW="100" />

minH

Тип: Number
По умолчанию: 20

Минимальная высота контейнера (в пикселях).

<Vue3DraggableResizable :minH="100" />

active

Тип: Логическое значение
По умолчанию: false

Указывает, выбран ли компонент.
Вы можете использовать "v-model:active", чтобы поддерживать его актуальность.```html


#### draggable

тип: `Логическое значение`<br>
по умолчанию: `true`<br>

Определяет, может ли компонент быть перемещаемым.

```html
<Vue3DraggableResizable :draggable="true" />

resizable

тип: Логическое значение
по умолчанию: true

Определяет, может ли компонент быть изменяемым по размеру.

<Vue3DraggableResizable :resizable="true" />