vue-draggable-resizable перетаскиваемый компонент с изменяемым размером

Vue.js

возобновить

новые особенности

  • Вспомогательная линия (новая)
  • Выравнивание элементов (новое) Видеть:vue-draggable-resizable-gorkys

Обновление версии 2.0

Описание: Компонент основан наvue-draggable-resizableВыполнить вторичную разработку

расстояниеВерсия 1.7С момента доработки версии прошел почти год, а оригинальные компоненты до этого обновлялись до версии 2.0.

Несмотря на то, что старая версия компонента была адаптирована ранее, поскольку исходный автор версии 2.0 провел рефакторинг кода, скопировать исходный модифицированный код невозможно.

Так это никогда не былообнаружение столкновенийтак же какпривязать, чтобы выровнятьФункция адаптирована к версии 2.0, и я адаптирую ее, когда у меня будет время в последнее время.

новые особенности

  • обнаружение столкновений
  • привязать, чтобы выровнять
  • Оптимизация стиля по умолчанию

адрес проекта

vue-draggable-resizable-gorkys

Если вам нравится этот проект, добро пожаловатьStar

Предварительный просмотр функции

Демонстрационный адрес английской версии | Демонстрационный адрес китайской версии

Примечание. Английская версия является официальной исходной версией, и в ней нет демонстрации новых функций.Китайская версияПереведено Google, новые функции高级доступно в каталоге

image

Добавить реквизит

isConflictCheck

Type: Boolean

Required: false

Default: false

Определяет, включать ли обнаружение конфликтов для компонента.

<vue-draggable-resizable :is-conflict-check="true">

snap

Type: Boolean

Required: false

Default: false

Определяет, разрешает ли компонент выравнивание элементов.

<vue-draggable-resizable :snap="true">

snapTolerance

Type: Number

Required: false

Default: 5

при звонкеsnap, определяет расстояние выравнивания между компонентом и элементом в пикселях (px).

<vue-draggable-resizable :snap="true" :snap-tolerance="20">

Другие свойства

английская версия | Китайская версия

Примечание: версия на английском языке является официальным оригиналом, а версия на китайском языкеверсия гугл переводчика

Установите и используйте

$ npm install --save vue-draggable-resizable-gorkys

Глобальная регистрация компонентов

//main.js
import Vue from 'vue'
import vdr from 'vue-draggable-resizable-gorkys'

// 导入默认样式
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
Vue.component('vdr', vdr)

Частично зарегистрированные компоненты

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vdr :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </vdr>
    <vdr
      :w="200"
      :h="200"
      :parent="true"
      :debug="false"
      :min-width="200"
      :min-height="200"
      :isConflictCheck="true"
      :snap="true"
      :snapTolerance="20"
    >
    </vdr>
  </div>
</template>

<script>
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
export default {
  components: {vdr},
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>
Категории