vue-draggable-resizable——可拖拽缩放的组件

此组件是Vue 用于可调整大小和可拖动元素并支持冲突检测、元素吸附、元素对齐、辅助线。

1.安装

npm install --save vue-draggable-resizable

2.导入

• 如果使用的地方较多可以选择在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>
    <vdr
      class="vdring"
      :parent="true"
      :w="300"
      :h="300"
      :min-width="225"
      :min-height="273"
    ></vdr>
  </div>
</template>
<script>
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
export default {
  name: 'MydemoDrag',
  components: {vdr},
};
</script>

<style lang="scss" scoped>
.vdring{
  background: pink;
}
</style>