vue-draggable-resizable Vue dom拖拽、等比例缩放插件

1、安装指定依赖 npm install vue-draggable-resizable --save

2、页面中引入

import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
//引入样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

3、VueDraggableResizable组件需要有一个父元素包裹，且width: 100vw;height: 100vh;（否则会拖出可视区）

4、

具体要拖拽缩放的内容

:x="10"  ----拖拽元素定位属性

:y="130"  ----拖拽元素定位属性

:w="dragW"  ----初始化拖拽元素宽度

:h="dragH" ----初始化拖拽元素高度

:min-height="320" ----拖拽元素最小高度

:min-width="420" ----拖拽元素最小宽度

:parent="true" ----拖拽元素相对于父元素拖拽，否则会拖出可视区

:max-width="maxWidth" ----拖拽元素最大宽度

:max-height="maxHeight" ----拖拽元素最大高度

:draggable="false"  -----设置元素不能被拖拽

:resizable="false"  -----设置元素不能调整大小

:z-index="zindex"  -----设置元素层级，不设置就是auto

常用属性差不多就这些

具体见：Storybook

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！