devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3DraggableResizable知识点_vue-draggable-resizable

作者：空白诗007 | 2024-08-17 08:35:00

赞

踩

vue-draggable-resizable

一、npm上介绍 

网址：vue3-draggable-resizable - npm

 1、安装、下载

npm下载插件

$ npm install vue3-draggable-resizable

文件中引入：全局注册

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

 在组件中使用

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

 示范案例：

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

2、参数Props

1.设置长宽高等

initW：设置宽度；

<Vue3DraggableResizable :initW="100" />

initH：设置高度；

<Vue3DraggableResizable :initH="100" />

w：容器的当前宽度(px)，您可以使用“v-model:w”使其保持最新状态；

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

h：容器的当前高度(px)，您可以使用“v-model:h”使其保持最新状态；

x：容器的当前距离左边的距离(px)，您可以使用“v-model:x”使其保持最新状态；

y：容器的当前距离顶部的距离(px)，您可以使用“v-model:y”使其保持最新状态；

minW：设置最小宽度；

<Vue3DraggableResizable :minW="100" />

minH：设置最小高度；

2.设置状态

active：显示该组件是否被选中，您可以使用“v-model:active”使其保持最新状态；

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

draggable：定义组件是否可拖动；

<Vue3DraggableResizable :draggable="true" />

resizable：定义组件是否可调整大小；

lockAspectRatio：lockAspectRatio属性用于锁定长宽比；

disabledX：定义组件是否可以在x轴上移动；

disabledY：定义组件是否可以在y轴上移动；

disabledW：定义组件的宽度是否可以修改；

disabledH：定义组件的高度是否可以修改；

parent：限制父节点内的移动和大小；

<Vue3DraggableResizable :parent="true" />

handles：定义枚举的大小数组来限制元素的大小调整

default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']

  • tl : Top left
  • tm : Top middle
  • tr : Top right
  • mr : Middle right
  • ml : Middle left
  • bl : Bottom left
  • bm : Bottom middle
  • br : Bottom right
<Vue3DraggableResizable :handles="['tl','tr','bl','br']" />

3.是否开启某设置

classNameDraggable：用于在启用可拖动组件时设置可拖动可调整大小的组件的自定义类；

<Vue3DraggableResizable classNameResizable="resizable" />

classNameResizable：用于在拖动时设置可拖动可调整大小的组件的自定义类；

classNameDragging：用于在拖动时设置可拖动可调整大小的组件的自定义类；

classNameResizing：用于在调整大小时设置可拖动可调整大小的组件的自定义类；

classNameActive：用于在活动时设置可拖动可调整大小的组件的自定义类；

classNameHandle：用于设置每个句柄元素的自定义公共类。

二、Vue3DraggableResizable

[Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。

文档目录

特性

  • 支持拖拽和缩放，可分别定义开启或关闭
  • 自定义缩放句柄（缩放时共有八个方位可操作，可分别定义开启或关闭）
  • 限制组件的拖动和缩放在其父节点内
  • 自定义组件内各种类名
  • 缩放句柄的类名也可自定义
  • 元素吸附对齐
  • 实时参考线
  • 自定义参考线
  • 使用 Vue3 和 ts

1、使用

$ npm install vue3-draggable-resizable

使用 use 方法注册组件

  1. // >main.js
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4. import Vue3DraggableResizable from 'vue3-draggable-resizable'
  5. //需引入默认样式
  6. import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
  7.  
  8. // 你将会获得一个名为Vue3DraggableResizable的全局组件
  9. createApp(App)
  10.   .use(Vue3DraggableResizable)
  11.   .mount('#app')

也可以单独在你的组件内部使用

// >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//需引入默认样式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default defineComponent({
  components: { Vue3DraggableResizable }
  // ...other
})

下面是一个使用 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>

2、Props

initW

type: Number
default: null

设置初始宽度（px）

<Vue3DraggableResizable :initW="100" />
initH

type: Number
default: null

设置初始高度（px）

<Vue3DraggableResizable :initH="100" />
w

type: Number
default: 0

组件的当前宽度（px）
你可以使用“v-model:w”语法使它和父组件保持一致

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

type: Number
default: 0

组件的当前高度（px）
你可以使用“v-model:h”语法使它和父组件保持一致

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

type: Number
default: 0

组件距离父容器的左侧的距离（px）
你可以使用“v-model:x”语法使它和父组件保持一致

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

type: Number
default: 0

组件距离父容器顶部的距离（px）
你可以使用“v-model:y”语法使它和父组件保持一致

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

type: Number
default: 20

组件的最小宽度（px）

<Vue3DraggableResizable :minW="100" />
minH

type: Number
default: 20

组件的最小高度（px）

<Vue3DraggableResizable :minH="100" />
active

type: Boolean
default: false

组件当前是否处于活跃状态
你可以使用“v-model:active”语法使它和父组件保持一致

<Vue3DraggableResizable v-model:active="100" />
draggable

type: Boolean
default: true

组件是否可拖动

<Vue3DraggableResizable :draggable="true" />
resizable

type: Boolean
default: true

组件是否可调整大小

<Vue3DraggableResizable :draggable="true" />
lockAspectRatio

type: Boolean
default: false

该属性用来设置是否锁定比例

<Vue3DraggableResizable :lockAspectRatio="true" />
disabledX

type: Boolean
default: false

是否禁止组件在 X 轴上移动

<Vue3DraggableResizable :disabledX="true" />
disabledY

type: Boolean
default: false

是否禁止组件在 Y 轴上移动

<Vue3DraggableResizable :disabledY="true" />
disabledW

type: Boolean
default: false

是否禁止组件修改宽度

<Vue3DraggableResizable :disabledW="true" />
disabledH

type: Boolean
default: false

是否禁止组件修改高度

<Vue3DraggableResizable :disabledH="true" />
parent

type: Boolean
default: false

是否将组件的拖动和缩放限制在其父节点内，即组件不会超出父节点，默认关闭

<Vue3DraggableResizable :parent="true" />
handles

type: Array
default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']

定义缩放的句柄（共八个方向）

  • tl : 上左
  • tm : 上中
  • tr : 上右
  • mr : 中左
  • ml : 中右
  • bl : 下左
  • bm : 下中
  • br : 下右
<Vue3DraggableResizable :handles="['tl','tr','bl','br']" />
classNameDraggable

type: String
default: draggable

自定义组件的类名，该类名在组件是“可拖动”时显示

<Vue3DraggableResizable classNameDraggable="draggable" />
classNameResizable

type: String
default: resizable

自定义组件类名，该类名在组件是“可缩放”时显示

<Vue3DraggableResizable classNameResizable="resizable" />
classNameDragging

type: String
default: dragging

定义组件在拖动时显示的类名

<Vue3DraggableResizable classNameDragging="dragging" />
classNameResizing

type: String
default: resizing

定义组件在缩放时显示的类名

<Vue3DraggableResizable classNameResizing="resizing" />
classNameActive

type: String
default: active

定义组件在活跃状态下的类名

<Vue3DraggableResizable classNameActive="active"></Vue3DraggableResizable>
classNameHandle

type: String
default: handle

定义缩放句柄的类名

<Vue3DraggableResizable classNameHandle="my-handle" />

以上设置将会渲染出下面的缩放句柄节点（my-handle-*）

...
<div class="vdr-handle vdr-handle-tl my-handle my-handle-tl"></div>
<div class="vdr-handle vdr-handle-tm my-handle my-handle-tm"></div>
<div class="vdr-handle vdr-handle-tr my-handle my-handle-tr"></div>
<div class="vdr-handle vdr-handle-ml my-handle my-handle-mr"></div>
...

3、Events

activated

payload: -

组件从非活跃状态到活跃状态时触发

<Vue3DraggableResizable @activated="activatedHandle" />
deactivated

payload: -

组件从活跃状态到非活跃状态时触发

<Vue3DraggableResizable @deactivated="deactivatedHandle" />
drag-start

payload: { x: number, y: number }

组件开始拖动时触发

<Vue3DraggableResizable @drag-start="dragStartHandle" />
dragging

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

组件在拖动过程中持续触发

<Vue3DraggableResizable @dragging="dragStartHandle" />
drag-end

payload: { x: number, y: number }

组件拖动结束时触发

<Vue3DraggableResizable @drag-end="dragEndHandle" />
resize-start

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

组件开始缩放时触发

<Vue3DraggableResizable @resize-start="resizeStartHandle" />
resizing

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

组件在缩放过程中持续触发

<Vue3DraggableResizable @resizing="resizingHandle" />
resize-end

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

组件缩放结束时触发

<Vue3DraggableResizable @resize-end="resizeEndHandle" />

使用吸附对齐功能

吸附对齐功能可以在拖动过程中和其他元素自动吸附，你也可以自定义吸附对齐的校准线

你需要引入另外一个组件来使用该特性

像下面这样，将 Vue3DraggableResizable 放在 DraggableContainer 内：

<template>
  <div id="app">
    <div class="parent">
      <DraggableContainer>
        <Vue3DraggableResizable>
          Test
        </Vue3DraggableResizable>
        <Vue3DraggableResizable>
          Another test
        </Vue3DraggableResizable>
      </DraggableContainer>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
// 这个组件不是默认导出的，
// 如果你之前是通过“app.use(Vue3DraggableResizable)”注册的，
// 那么你这里就不需要再引入了，因为DraggableContainer这个已经被全局注册了，你可以直接使用
import { DraggableContainer } from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
  components: { Vue3DraggableResizable, DraggableContainer }
})
</script>
<style>
.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}
</style>

4、DraggableContainer Props

这些 props 适用于 DraggableContainer 组件

disabled

type: Boolean
default: false

关闭吸附对齐功能

<DraggableContainer :disabled="true">
  <Vue3DraggableResizable>
    Test
  </Vue3DraggableResizable>
  <Vue3DraggableResizable>
    Another test
  </Vue3DraggableResizable>
</DraggableContainer>
adsorbParent

type: Boolean
default: true

是否和父组件对齐，如果开启，则元素拖拽到父容器边缘（父容器的上中下左中右边）时会发生吸附，否则不会

<DraggableContainer :adsorbParent="false">
  <Vue3DraggableResizable>
    Test
  </Vue3DraggableResizable>
  <Vue3DraggableResizable>
    Another test
  </Vue3DraggableResizable>
</DraggableContainer>
adsorbCols

type: Array<Number>
default: null

自定义列的校准线，元素在x轴上拖动到这些线附近时，会产生吸附

<DraggableContainer :adsorbCols="[10,20,30]">
  <Vue3DraggableResizable>
    Test
  </Vue3DraggableResizable>
  <Vue3DraggableResizable>
    Another test
  </Vue3DraggableResizable>
</DraggableContainer>
adsorbRows

type: Array<Number>
default: null

自定义行的校准线，元素在y轴上拖动到这些线附近时，会产生吸附

<DraggableContainer :adsorbRows="[10,20,30]">
  <Vue3DraggableResizable>
    Test
  </Vue3DraggableResizable>
  <Vue3DraggableResizable>
    Another test
  </Vue3DraggableResizable>
</DraggableContainer>
referenceLineVisible

type: Boolean
default: true

是否显示实时参考线，元素在产生自动吸附后，会有一条参考线线出现，如果不需要，可通过该选项关闭。

<DraggableContainer :referenceLineVisible="false">
  <Vue3DraggableResizable>
    Test
  </Vue3DraggableResizable>
  <Vue3DraggableResizable>
    Another test
  </Vue3DraggableResizable>
</DraggableContainer>
referenceLineColor

type: String
default: #f00

实时参考线的颜色，默认红色

<DraggableContainer :referenceLineColor="#0f0">
  <Vue3DraggableResizable>
    Test
  </Vue3DraggableResizable>
  <Vue3DraggableResizable>
    Another test
  </Vue3DraggableResizable>
</DraggableContainer>

3、事件

1.activated

<Vue3DraggableResizable @activated="activatedHandle" />

2.deactivated

3.drag-start

<Vue3DraggableResizable @drag-start="dragStartHandle" />

4.dragging

5.drag-end

6.resize-start

7.resizing

8.resize-end

三、vue3基础组件使用

网址：Vue3DragResizeRotate

  • 基本组件
  • 自适应大小
  • 最小宽高限制
  • 最大宽高限制
  • 组件插槽
  • 控制是否处于活动状态
  • 阻止失活
  • 是否允许拖动位置
  • 是否允许调整大小
  • 是否允许旋转角度 (新增)
  • 是否允许内部元素拖拽
  • 限制允许拖动的范围
  • 限制禁止拖动的范围
  • 控制组件的z-index
  • 控制拉伸手柄的数量
  • 限制运动轴
  • 限制用户选择
  • 放缩 (新增)

1、基本

1.基本组件

最基本的组件，没有任何道具，甚至可以在父元素之外自由移动。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">基本组件</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate :x="0" :y="0" :w="200" :h="200">
  6.         <p>你可以拖着我，按照自己的意愿调整大小。1</p>
  7.       </VueDragResizeRotate>
  8.       <VueDragResizeRotate :x="200" :y="200" :w="200" :h="200">
  9.         <p>你可以拖着我，按照自己的意愿调整大小。2</p>
  10.       </VueDragResizeRotate>
  11.     </div>
  12.   </div>
  13. </template>

2.自适应大小

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">自适应大小</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate w="auto" h="auto">随便填一点内容，我会自动适应大小</VueDragResizeRotate>
  6.     </div>
  7.   </div>
  8. </template>

3.最小宽高限制

具有Min Height和Min Width基本组件的基本组件，最小高度和最小宽度分别由:minw 和:minh 属性控制。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       min Width:
  5.       <input type="number" v-model.number="minWidth" />
  6.       min Height:
  7.       <input type="number" v-model.number="minHeight" />
  8.     </div>
  9.     <div class="container">
  10.       <VueDragResizeRotate
  11.         :min-width="minWidth"
  12.         :min-height="minHeight"
  13.         :w="200"
  14.         :h="200"
  15.         @resizing="onResize"
  16.         @resizestop="onResize"
  17.       >
  18.         <div>
  19.           <p>基本组件，可以配置</p>
  20.           <b>minWidth</b>
  21.           和
  22.           <b>minHeight</b>
  23.           属性
  24.           <p>w:{{ w }},h:{{ h }}</p>
  25.         </div>
  26.       </VueDragResizeRotate>
  27.     </div>
  28.   </div>
  29. </template>
  30.  
  31. <script>
  32. export default {
  33.   data() {
  34.     return {
  35.       minWidth: 200,
  36.       minHeight: 200,
  37.       w: 200,
  38.       h: 200
  39.     };
  40.   },
  41.   methods: {
  42.     onResize: function (x, y, width, height) {
  43.       this.w = width;
  44.       this.h = height;
  45.     }
  46.   }
  47. };
  48. </script>

4.最大宽高限制

具有Max Height和Max Width基本组件的基本组件，最大高度和最大宽度分别由 :max-height 和:max-width 属性控制。

5.组件插槽

一个基本组件，内部有一个表单。 输入应该是可聚焦的，按钮应该是可点击的。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">组件插槽</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate>
  6.         <p>基本组件内插入表单</p>
  7.         <form @submit.stop.prevent="onSubmit">
  8.           <input type="text" name="input" value="Hello" />
  9.           <button type="submit">Submit</button>
  10.         </form>
  11.       </VueDragResizeRotate>
  12.     </div>
  13.   </div>
  14. </template>
  15.  
  16. <script>
  17. export default {
  18.   methods: {
  19.     onSubmit(e) {
  20.       console.log(e);
  21.       alert("You just submitted the form!");
  22.     }
  23.   }
  24. };
  25. </script>

6.控制是否处于活动状态

一个基本组件，带有active prop，用于控制组件外部的活动状态。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       <input type="checkbox" v-model="active1" />
  5.       Toggle Active1
  6.       <input type="checkbox" v-model="active2" />
  7.       Toggle Active2
  8.     </div>
  9.     <div class="container">
  10.       <VueDragResizeRotate :active="active1">
  11.         <p>
  12.           外部组件通过控制
  13.           <b>:active</b>
  14.           prop来控制组件的激活状态
  15.         </p>
  16.       </VueDragResizeRotate>
  17.       <VueDragResizeRotate :active="active2">
  18.         <p>
  19.           外部组件通过控制
  20.           <b>:active</b>
  21.           prop来控制组件的激活状态
  22.         </p>
  23.       </VueDragResizeRotate>
  24.     </div>
  25.   </div>
  26. </template>
  27.  
  28. <script>
  29. export default {
  30.   data() {
  31.     return {
  32.       active1: false,
  33.       active2: false
  34.     };
  35.   },
  36.   methods: {}
  37. };
  38. </script>

7.阻止失活

一个基本组件，带有prevent-deactivation prop，以避免在外部点击时解除活动状态。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">外部点击不会失活</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate :prevent-deactivation="true">
  6.         <p>
  7.           设置
  8.           <b>:prevent-deactivation</b>
  9.           属性，让组件不能取消激活状态
  10.         </p>
  11.       </VueDragResizeRotate>
  12.       <VueDragResizeRotate :prevent-deactivation="true">
  13.         <p>
  14.           设置
  15.           <b>:prevent-deactivation</b>
  16.           属性，让组件不能取消激活状态
  17.         </p>
  18.       </VueDragResizeRotate>
  19.     </div>
  20.   </div>
  21. </template>

8.是否允许拖动位置

一个基本组件，draggable prop设置为false，因此它不可拖动。

9.是否允许调整大小

一个基本组件，resizable prop设置为false，因此它不可调整大小。

10.是否允许旋转角度

一个基本组件，rotatable prop设置为true，因此它可以旋转角度。

11.是否允许内部元素拖拽

一个基本组件，enable-native-drag prop设置为true，以允许组件内部元素的拖动行为。 您可以通过使用球拖动每个组件来查看差异。 默认值为false。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">允许内部元素拖拽</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate :enable-native-drag="false" :x="0" :y="0" :w="200" :h="200">
  6.         <p>不允许浏览器原生JavaScript拖拽</p>
  7.         <p>Native drag disabled. Try to drag the component from the ball.</p>
  8.         <img :src="require('@/assets/ball.svg')" />
  9.       </VueDragResizeRotate>
  10.       <VueDragResizeRotate :enable-native-drag="true" :x="0" :y="200" :w="200" :h="200">
  11.         <p>允许浏览器原生JavaScript拖拽</p>
  12.         <p>Native drag enabled. Try to drag the component from the ball.</p>
  13.         <img :src="require('@/assets/ball.svg')" />
  14.       </VueDragResizeRotate>
  15.     </div>
  16.   </div>
  17. </template>

12.限制允许拖动的范围

一个基本组件，只能通过一个句柄拖动，由prop drag-handle 和一个有效的CSS选择器来指定，只能通过该DOM元素来拖动组件。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">限制允许拖动的范围</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate v-for="(item, index) in list" :z="item.zIndex" :x="item.x" :y="item.y" :key="index" @activated="onActivated(index)"
  6.         style="border: 1px solid black" :drag-handle="'.drag-handle'">
  7.         <div class="full-box" :style="{ 'background-color': item.color }">
  8.           <div class="drag-handle">Drag Only Here</div>
  9.         </div>
  10.       </VueDragResizeRotate>
  11.     </div>
  12.   </div>
  13. </template>
  14.  
  15. <script>
  16. export default {
  17.   data() {
  18.     return {
  19.       list: [
  20.         { zIndex: 1, x: 100, y: 100, color: 'red', },
  21.         { zIndex: 2, x: 250, y: 200, color: 'green' },
  22.         { zIndex: 3, x: 400, y: 100, color: 'blue', }
  23.       ]
  24.     }
  25.   },
  26.   methods: {
  27.     onActivated(index) {
  28.       console.log('onActivated', index)
  29.       const indexs  = this.list.map(item => item.zIndex);
  30.       const maxIndex = Math.max(...indexs);
  31.       this.list[index].zIndex = maxIndex + 1;
  32.     }
  33.   }
  34. };
  35. </script>
  36.  
  37. <style scoped>
  38. .full-box {
  39.   width: 100%;
  40.   height: 100%;
  41. }
  42. </style>

13.限制禁止拖动的范围

一个基本组件，无法通过句柄拖动，由prop drag-cancel 和有效的CSS选择器来指定，该范围无法将无法拖动组件。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">限制禁止拖动的范围</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate style="border: 1px solid black" :drag-cancel="'.drag-cancel'">
  6.         <div class="drag-cancel">Cannot Drag Here</div>
  7.       </VueDragResizeRotate>
  8.     </div>
  9.   </div>
  10. </template>

14.控制组件的z-index

一个基本组件，使用z-index prop来控制组件外部的z-index。 如果没有提供，它将采用值auto。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       Change z-index:
  5.       <input type="number" v-model="z" />
  6.     </div>
  7.     <div class="container">
  8.       <VueDragResizeRotate :z="z" :x="150" :y="150" style="background-color: #ccc">
  9.         <div>
  10.           通过
  11.           <b>:z属性</b>
  12.           <p>控制组件的z-index:{{ z }}层级</p>
  13.         </div>
  14.       </VueDragResizeRotate>
  15.       <div
  16.         style="
  17.           width: 200px;
  18.           height: 200px;
  19.           background-color: red;
  20.           position: absolute;
  21.           top: 100px;
  22.           left: 100px;
  23.           z-index: 1;
  24.           text-align: center;
  25.           font-size: 24px;
  26.         "
  27.       >
  28.         1
  29.       </div>
  30.       <div
  31.         style="
  32.           width: 300px;
  33.           height: 300px;
  34.           background-color: green;
  35.           position: absolute;
  36.           top: 200px;
  37.           left: 200px;
  38.           z-index: 9;
  39.           text-align: center;
  40.           font-size: 24px;
  41.         "
  42.       >
  43.         9
  44.       </div>
  45.     </div>
  46.   </div>
  47. </template>
  48.  
  49. <script>
  50. export default {
  51.   data() {
  52.     return {
  53.       z: 0
  54.     };
  55.   }
  56. };
  57. </script>

15.控制拉伸手柄的数量

您可以使用handles prop选择要为组件提供的句柄，它接受句柄数组。 例如，如果你想仅在横轴上进行成本调整，你只能提供左右句柄：handles =“['ml'，'mr']”。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       <label v-for="handle in Object.keys(handles)" :key="handle">
  5.         <input type="checkbox" v-model="handles[handle]" />
  6.         {{ handle }}
  7.       </label>
  8.     </div>
  9.     <div class="container">
  10.       <VueDragResizeRotate :handles="enabledHandles" :prevent-deactivation="true" :w="250" :h="250">
  11.         <p>Enable/disable handles.</p>
  12.         <ul>
  13.           <li v-for="handle in Object.keys(handles)" :key="handle">
  14.             {{ handle }} - {{ handles[handle] ? "&check;" : "&cross;" }}
  15.           </li>
  16.         </ul>
  17.       </VueDragResizeRotate>
  18.     </div>
  19.   </div>
  20. </template>
  21.  
  22. <script>
  23. export default {
  24.   data() {
  25.     return {
  26.       handles: {
  27.         tl: true,
  28.         tm: true,
  29.         tr: true,
  30.         mr: true,
  31.         br: true,
  32.         bm: true,
  33.         bl: true,
  34.         ml: true
  35.       }
  36.     };
  37.   },
  38.   computed: {
  39.     enabledHandles() {
  40.       return Object.keys(this.handles).filter(handle => this.handles[handle] === true);
  41.     }
  42.   }
  43. };
  44. </script>
  45.  
  46. <style scoped>
  47. .vdr ul,
  48. .VueDragResizeRotate ul {
  49.   margin: 0 0 0 25px;
  50. }
  51. </style>

16.限制运动轴

一个基本组件，使用axis来控制可拖动的轴。 合适的值是x，y或both。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       <label>
  5.         <input type="checkbox" v-model="x" />
  6.         X
  7.       </label>
  8.       <label>
  9.         <input type="checkbox" v-model="y" />
  10.         Y
  11.       </label>
  12.     </div>
  13.     <div class="container">
  14.       <VueDragResizeRotate :axis="axis">
  15.         <p>Draggable on {{ axis }} axis.</p>
  16.       </VueDragResizeRotate>
  17.     </div>
  18.   </div>
  19. </template>
  20.  
  21. <script>
  22. export default {
  23.   data() {
  24.     return {
  25.       x: true,
  26.       y: true
  27.     };
  28.   },
  29.   computed: {
  30.     axis() {
  31.       if (this.x && this.y) return "both";
  32.       if (this.x) return "x";
  33.       if (this.y) return "y";
  34.       return false;
  35.     }
  36.   }
  37. };
  38. </script>

17.限制用户选择

阻止用户选中组件内文本

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       <input type="checkbox" v-model="disableUserSelect1" />
  5.       Toggle disableUserSelect1
  6.       <input type="checkbox" v-model="disableUserSelect2" />
  7.       Toggle disableUserSelect2
  8.     </div>
  9.     <div class="container">
  10.       <VueDragResizeRotate :parent="true" :disableUserSelect="disableUserSelect1">
  11.         <p>
  12.           你
  13.           {{ disableUserSelect1 ? "不可以" : "可以" }}
  14.           选择组件内部的的文字，不妨双击试试!!!
  15.           <br />
  16.           <b>:disableUserSelect</b>
  17.           prop equal to {{ disableUserSelect1 }}.
  18.         </p>
  19.       </VueDragResizeRotate>
  20.       <VueDragResizeRotate :parent="true" :disableUserSelect="disableUserSelect2">
  21.         <p>
  22.           你
  23.           {{ disableUserSelect2 ? "不可以" : "可以" }}
  24.           选择组件内部的的文字，不妨双击试试!!!
  25.           <br />
  26.           <b>:disableUserSelect</b>
  27.           prop equal to {{ disableUserSelect2 }}.
  28.         </p>
  29.       </VueDragResizeRotate>
  30.     </div>
  31.   </div>
  32. </template>
  33.  
  34. <script>
  35. export default {
  36.   data() {
  37.     return {
  38.       disableUserSelect1: false,
  39.       disableUserSelect2: false
  40.     };
  41.   }
  42. };
  43. </script>

18.放缩 

放缩时，建议保持父元素盒子和vue-drag-resize-rotate放缩值保持一致

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       <el-input-number size="mini" v-model="scaleRatio" :step="0.1" :min="0.1" :max="10" />
  5.       <span class="ml_10">scaleRatio</span>
  6.     </div>
  7.     <div class="container" :style="containerStyle()">
  8.       <VueDragResizeRotate
  9.         :rotatable="rotatable"
  10.         :x="position.x"
  11.         :y="position.y"
  12.         :w="position.w"
  13.         :h="position.h"
  14.         :r="angle"
  15.         @rotating="rotating"
  16.         :resizable="true"
  17.         @resizing="resizing"
  18.         :parent="true"
  19.         :scaleRatio="scaleRatio"
  20.       >
  21.         <p>位置为({{ position.x }},{{ position.y }})</p>
  22.         <p>大小为({{ position.w }},{{ position.h }})</p>
  23.         <p>角度为{{ angle }}</p>
  24.       </VueDragResizeRotate>
  25.     </div>
  26.   </div>
  27. </template>
  28.  
  29. <script>
  30. export default {
  31.   data() {
  32.     return {
  33.       rotatable: true,
  34.       position: {
  35.         x: 0,
  36.         y: 0,
  37.         w: 200,
  38.         h: 200
  39.       },
  40.       angle: 0,
  41.       scaleRatio: 1
  42.     };
  43.   },
  44.   methods: {
  45.     rotating(val) {
  46.       this.angle = val;
  47.     },
  48.     resizing(x, y, w, h) {
  49.       this.position = { x, y, w, h };
  50.     },
  51.     containerStyle() {
  52.       return {
  53.         transform: `scale(${this.scaleRatio})`
  54.       };
  55.     }
  56.   }
  57. };
  58. </script>
  59.  
  60. <style scoped>
  61. #toolbar {
  62.   display: flex;
  63.   align-items: center;
  64. }
  65. .container {
  66.   transform-origin: left top;
  67. }
  68. </style>

2、网格对齐

1.网格20x20

一个基本组件，用grid = [20,20] prop来设置网格单元的尺寸（高度和宽度，以像素为单位）。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">Size: {{ width }} x {{ height }}</div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate :grid="[20, 20]" :x="0" :y="0" @resizing="onResizing">
  7.           <p>Grid 20x20 starting from the top-left corner</p>
  8.         </VueDragResizeRotate>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       width: 200,
  19.       height: 200,
  20.       style: {
  21.         position: "relative",
  22.         height: "100%",
  23.         width: "100%",
  24.         backgroundColor: "#808080",
  25.         background:
  26.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  27.         backgroundSize: "20px 20px, 20px 20px"
  28.       }
  29.     };
  30.   },
  31.   methods: {
  32.     onResizing(x, y, width, height) {
  33.       this.width = width;
  34.       this.height = height;
  35.     }
  36.   }
  37. };
  38. </script>

2.网格20x40

3.网格20x20+偏移10x10

始终从组件的左上角计算网格。 在此示例中，您可以看到它相对于父元素具有偏移量。 这对于父元素中的成本要求很重要。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">Size: {{ width }} x {{ height }}</div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate :grid="[20, 20]" :x="10" :y="10" @resizing="onResizing">
  7.           <p>Grid 20x20 starting with a 10x10 offset</p>
  8.         </VueDragResizeRotate>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       width: 200,
  19.       height: 200,
  20.       style: {
  21.         position: "relative",
  22.         height: "100%",
  23.         width: "100%",
  24.         backgroundColor: "#808080",
  25.         background:
  26.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  27.         backgroundSize: "20px 20px, 20px 20px",
  28.         backgroundPosition: "10px 10px"
  29.       }
  30.     };
  31.   },
  32.   methods: {
  33.     onResizing(x, y, width, height) {
  34.       this.width = width;
  35.       this.height = height;
  36.     }
  37.   }
  38. };
  39. </script>

4.网格20x40+偏移10x20+最小限制

如果您提供的minHeight和minWidth值低于相应的网格值，您可以注意到调整大小会停止到最低的合适值。 例如，在x轴上，尊重minWidth和grid [x]约束的最低有效值是40.同样适用于y轴。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">Size: {{ width }} x {{ height }}</div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate :grid="[20, 40]" :x="10" :y="20" :minHeight="30" :minWidth="30">
  7.           <p>Grid 20x40 starting with a 10x20 offset and min height, min width values equal to 30.</p>
  8.         </VueDragResizeRotate>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       width: 200,
  19.       height: 200,
  20.       style: {
  21.         position: "relative",
  22.         backgroundColor: "#808080",
  23.         height: "100%",
  24.         width: "100%",
  25.         background:
  26.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  27.         backgroundSize: "20px 40px, 20px 40px",
  28.         backgroundPosition: "10px 20px"
  29.       }
  30.     };
  31.   },
  32.   methods: {
  33.     onResizing(x, y, width, height) {
  34.       this.width = width;
  35.       this.height = height;
  36.     }
  37.   }
  38. };
  39. </script>

5.网格20x40+偏移10x20+最大限制

如果提供的maxHeight和maxWidth值高于相应的网格值，则可以注意到调整大小会停止到较低的合适值。 例如，在x轴上，尊重maxWidth和grid [x]约束的最低有效值是80.这同样适用于y轴。

3、父级限制

1.父级容器基本案例

无法在其父元素之外拖动或调整大小的组件，使用prop ：parent =“true”定义。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">父级容器基本案例</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate :parent="true">
  6.         <p>你不能将当前组件拖动或调整大小超过父元素容器</p>
  7.       </VueDragResizeRotate>
  8.     </div>
  9.   </div>
  10. </template>

2.父级+自适应

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">父级+自适应</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate :parent="true" w="auto" h="auto">随便填一点东西</VueDragResizeRotate>
  6.     </div>
  7.   </div>
  8. </template>

3.父级+最大限制

无法在其父元素之外拖动或调整大小的组件，使用 maxWidth 和 maxHeight 来限制其大小。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">Size: {{ width }} x {{ height }}</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate :parent="true" :max-width="300" :max-height="300" @resizing="onResizing">
  6.         <p>
  7.           Component costrained in parent with
  8.           <b>maxWidth</b>
  9.           and
  10.           <b>maxHeight</b>
  11.           equal to 300.
  12.         </p>
  13.       </VueDragResizeRotate>
  14.     </div>
  15.   </div>
  16. </template>
  17.  
  18. <script>
  19. export default {
  20.   data() {
  21.     return {
  22.       width: 200,
  23.       height: 200
  24.     };
  25.   },
  26.   methods: {
  27.     onResizing(x, y, width, height) {
  28.       this.width = width;
  29.       this.height = height;
  30.     }
  31.   }
  32. };
  33. </script>

4.父级+网格

附加到网格的组件，不能在其父元素之外拖动或调整大小，使用prop ：parent =“true”定义。 在这种情况下，父级的大小完全匹配网格。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">父级+网格</div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate :parent="true" :grid="[20, 20]">
  7.           <p>You cannot move me or resize me outside my parent.</p>
  8.         </VueDragResizeRotate>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       style: {
  19.         position: "relative",
  20.         backgroundColor: "#808080",
  21.         background:
  22.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  23.         backgroundSize: "20px 20px, 20px 20px",
  24.         height: "100%",
  25.         width: "100%"
  26.       }
  27.     };
  28.   }
  29. };
  30. </script>

5.父级+网格+偏移

组件附加到具有小偏移的网格。 它的起始位置与父级的左上角不完全对齐。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">父级限制+网格+偏移</div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate :parent="true" :grid="[20, 20]" :x="10" :y="10" :h="400" :w="400">
  7.           <p>You cannot move me or resize me outside my parent. And my edges cannot touch the parent element.</p>
  8.         </VueDragResizeRotate>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       style: {
  19.         position: "relative",
  20.         backgroundColor: "#808080",
  21.         background:
  22.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  23.         backgroundSize: "20px 20px, 20px 20px",
  24.         backgroundPosition: "10px 10px",
  25.         width: "100%",
  26.         height: "100%",
  27.         boxSizing: "border-box"
  28.       }
  29.     };
  30.   }
  31. };
  32. </script>

6.父级+网格+最大限制

附加到网格的组件，无法在其父元素之外拖动或调整大小，使用 maxWidth 和 maxHeight 来限制其大小。 __Notice__使用20作为grid prop为 y轴，元素的maxHeight是280而不是290。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">Size: {{ width }} x {{ height }}</div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate
  7.           :parent="true"
  8.           :max-width="290"
  9.           :max-height="290"
  10.           @resizing="onResizing"
  11.           :grid="[10, 20]"
  12.         >
  13.           <p>
  14.             Component costrained in parent with
  15.             <b>maxWidth</b>
  16.             and
  17.             <b>maxHeight</b>
  18.             equal to 290.
  19.           </p>
  20.         </VueDragResizeRotate>
  21.       </div>
  22.     </div>
  23.   </div>
  24. </template>
  25.  
  26. <script>
  27. export default {
  28.   data() {
  29.     return {
  30.       width: 200,
  31.       height: 200,
  32.       style: {
  33.         position: "relative",
  34.         backgroundColor: "#808080",
  35.         background:
  36.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  37.         backgroundSize: "10px 20px, 10px 20px",
  38.         width: "100%",
  39.         height: "100%",
  40.         boxSizing: "border-box"
  41.       }
  42.     };
  43.   },
  44.   methods: {
  45.     onResizing(x, y, width, height) {
  46.       this.width = width;
  47.       this.height = height;
  48.     }
  49.   }
  50. };
  51. </script>

7.父级+控制组件

一个基本的父控制组件，x ，y ，w 和h 用于控制组件位置和大小的道具。 __Notice__使用grid prop，组件只会对网格值的有效倍数作出反应。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       X:
  5.       <input type="number" v-model.number="x" />
  6.       Y:
  7.       <input type="number" v-model.number="y" />
  8.       Width:
  9.       <input type="number" v-model.number="w" />
  10.       Height:
  11.       <input type="number" v-model.number="h" />
  12.     </div>
  13.     <div class="container">
  14.       <div :style="style">
  15.         <VueDragResizeRotate
  16.           :parent="true"
  17.           :grid="[20, 20]"
  18.           :x="x"
  19.           :y="y"
  20.           :h="h"
  21.           :w="w"
  22.           @dragging="onDrag"
  23.           @resizing="onResize"
  24.         >
  25.           <p>You cannot move me or resize me outside my parent.</p>
  26.         </VueDragResizeRotate>
  27.       </div>
  28.     </div>
  29.   </div>
  30. </template>
  31.  
  32. <script>
  33. export default {
  34.   data() {
  35.     return {
  36.       x: 10,
  37.       y: 10,
  38.       w: 100,
  39.       h: 100,
  40.       style: {
  41.         position: "relative",
  42.         backgroundColor: "#808080",
  43.         background:
  44.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  45.         backgroundSize: "20px 20px, 20px 20px",
  46.         backgroundPosition: "10px 10px",
  47.         width: "100%",
  48.         height: "100%",
  49.         boxSizing: "border-box"
  50.       }
  51.     };
  52.   },
  53.   methods: {
  54.     onDrag(left, top) {
  55.       this.x = left;
  56.       this.y = top;
  57.     },
  58.     onResize(left, top, width, height) {
  59.       this.x = left;
  60.       this.y = top;
  61.       this.w = width;
  62.       this.h = height;
  63.     }
  64.   }
  65. };
  66. </script>

4、纵横比 

1.锁定纵横比

具有lock-aspect-ratio prop的组件，用于在调整大小期间保持组件的宽高比。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       <input type="checkbox" v-model="ratio" />
  5.       Toggle Lock Aspect Ratio
  6.     </div>
  7.     <div class="container">
  8.       <VueDragResizeRotate :lock-aspect-ratio="ratio">
  9.         <p>
  10.           Keep aspect ratio using
  11.           <b>:lock-aspect-ratio</b>
  12.           prop.
  13.         </p>
  14.       </VueDragResizeRotate>
  15.     </div>
  16.   </div>
  17. </template>
  18.  
  19. <script>
  20. export default {
  21.   data() {
  22.     return {
  23.       ratio: true
  24.     };
  25.   }
  26. };
  27. </script>

2.纵横比+最小限制

一个组件，lock-aspect-ratio prop和最小高度设置为100，最小宽度设置为50.请注意，锁定纵横比也会强制最小宽度为100（条件：1 / 1）。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">Size: {{ width }} x {{ height }}</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate :lock-aspect-ratio="true" :minHeight="100" :minWidth="50" @resizing="onResizing">
  6.         <p>
  7.           Keep aspect ratio and set
  8.           <b>minHeight</b>
  9.           to 100 and
  10.           <b>minWidth</b>
  11.           to 50.
  12.         </p>
  13.       </VueDragResizeRotate>
  14.     </div>
  15.   </div>
  16. </template>
  17.  
  18. <script>
  19. export default {
  20.   data() {
  21.     return {
  22.       width: 200,
  23.       height: 200
  24.     };
  25.   },
  26.   methods: {
  27.     onResizing(x, y, width, height) {
  28.       this.width = width;
  29.       this.height = height;
  30.     }
  31.   }
  32. };
  33. </script>

3.纵横比+最大限制

一个组件，lock-aspect-ratio prop和 maxWidth 设置为300， maxHeight 设置为250。 请注意，锁定纵横比也会强制最大宽度为250。

4.纵横比+父级容器限制

在父级中使用的组件，lock-aspect-ratio prop用于在调整大小期间保持组件的宽高比。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar"></div>
  4.     <div class="container">
  5.       <VueDragResizeRotate :lock-aspect-ratio="true" :parent="true">
  6.         <p>Combine aspect ratio and costrain in parent.</p>
  7.       </VueDragResizeRotate>
  8.     </div>
  9.   </div>
  10. </template>

5.纵横比+对齐网格

具有宽高比的组件在20x20网格上进行了受限

使用lock-aspect-ratio时，在网格上使用组件的成本并不是很好。 您可以通过拖动（例如右手柄或底部手柄）来注意到您有不同的结果。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar"></div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate :w="400" :h="200" :lock-aspect-ratio="true" :grid="[20, 20]">
  7.           <p>Keep aspect ratio in component costrained on grid.</p>
  8.         </VueDragResizeRotate>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       style: {
  19.         position: "relative",
  20.         backgroundColor: "#808080",
  21.         height: "100%",
  22.         background:
  23.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  24.         backgroundSize: "20px 20px, 20px 20px"
  25.       }
  26.     };
  27.   }
  28. };
  29. </script>

6.在偏移的网格上对齐

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar"></div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate :grid="[20, 40]" :x="10" :y="20" :minh="30" :minw="30" :lock-aspect-ratio="true">
  7.           <p>Aspect ratio in Grid 20x40 starting with a 10x20 offset</p>
  8.         </VueDragResizeRotate>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       style: {
  19.         position: "relative",
  20.         backgroundColor: "#808080",
  21.         height: "100%",
  22.         background:
  23.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  24.         backgroundSize: "20px 40px, 20px 40px",
  25.         backgroundPosition: "10px 20px"
  26.       }
  27.     };
  28.   }
  29. };
  30. </script>

7.在父级中对齐网格

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar"></div>
  4.     <div class="container">
  5.       <div :style="style">
  6.         <VueDragResizeRotate :grid="[20, 20]" :parent="true" :lock-aspect-ratio="true">
  7.           <p>Keep aspect ratio, grid and parent costrained.</p>
  8.         </VueDragResizeRotate>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       style: {
  19.         position: "relative",
  20.         backgroundColor: "#808080",
  21.         background:
  22.           "linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)",
  23.         backgroundSize: "20px 20px, 20px 20px",
  24.         height: "100%",
  25.         width: "100%",
  26.         boxSizing: "border-box"
  27.       }
  28.     };
  29.   }
  30. };
  31. </script>

8.外部传入纵横比参数 (新增)

具有lock-aspect-ratio prop的组件，用于在调整大小期间保持组件的宽高比。
设置outsideAspectRatio来控制组件的纵横比

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">
  4.       <input type="checkbox" v-model="ratio" />
  5.       Toggle Lock Aspect Ratio
  6.       <input type="number" v-model="outsideAspectRatio" />
  7.     </div>
  8.     <div class="container">
  9.       <VueDragResizeRotate :lock-aspect-ratio="ratio" :outsideAspectRatio="outsideAspectRatio">
  10.         <p>
  11.           Keep aspect ratio using
  12.           <b>:lock-aspect-ratio</b>
  13.           prop.
  14.         </p>
  15.       </VueDragResizeRotate>
  16.     </div>
  17.   </div>
  18. </template>
  19.  
  20. <script>
  21. export default {
  22.   data() {
  23.     return {
  24.       ratio: true,
  25.       outsideAspectRatio: 1.7777
  26.     };
  27.   }
  28. };
  29. </script>

5、样式

1.Style 组件

具有自定义类名的组件，由prop class-name 提供。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">具有自定义类名的组件</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate class-name="my-class">
  6.         <p>
  7.           你可以给组件设置一个类名，覆盖其默认类名
  8.           <b>class-name</b>
  9.         </p>
  10.       </VueDragResizeRotate>
  11.     </div>
  12.   </div>
  13. </template>
  14.  
  15. <style scoped>
  16. .my-class {
  17.   border: 1px solid red;
  18.   -webkit-transition: background-color 200ms linear;
  19.   -ms-transition: background-color 200ms linear;
  20.   transition: background-color 200ms linear;
  21. }
  22. </style>

2.Style 拖动

在拖动时具有自定义类名的组件，由prop class-name-dragging 提供。

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">拖动时具有自定义类名的组件</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate class-name-dragging="my-dragging-class" class-name="my-class">
  6.         <p>
  7.           你也可以设置组件处于拖拽式的类名
  8.           <b>class-name-dragging</b>
  9.         </p>
  10.       </VueDragResizeRotate>
  11.     </div>
  12.   </div>
  13. </template>
  14.  
  15. <style scoped>
  16. .my-class {
  17.   border: 1px solid red;
  18.   -webkit-transition: background-color 200ms linear;
  19.   -ms-transition: background-color 200ms linear;
  20.   transition: background-color 200ms linear;
  21. }
  22. .my-dragging-class {
  23.   background-color: red;
  24.   border: 1px solid black;
  25. }
  26. </style>

3.Style 拉伸

调整大小时具有自定义类名的组件，由prop class-name-resizing 提供。

4.Style 活跃

在活动状态下具有自定义类名的组件，由prop class-name-active 提供。

5.Style 句柄

具有handle的自定义类的组件，随prop class-name-handle 提供。 这样，您可以单独设置每个手柄的样式。

记得为句柄类设置position：absolute

6.Style 手柄插槽

具有句柄自定义标记的组件，由VueJS named slots提供（例如slot =“tl”）。

Slots | Vue.js

  1. <template>
  2.   <div class="view-box">
  3.     <div id="toolbar">具有句柄自定义标记的组件</div>
  4.     <div class="container">
  5.       <VueDragResizeRotate class-name-handle="my-handle-class">
  6.         <p>The first child will populate the default slot.</p>
  7.         <template v-slot:tl>
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/991971
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。