vue-auto-drag
自由拖拽div的vue组件, 上下左右或自由拖拽div,改变div的高度和宽度 auto drag components, drag you components to change height or width
Example
Demo Page 示例地址
Changelog
use
NPM
npm install vue-auto-drag --save
YARN
yarn add vue-auto-drag
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
dragMove |
自由拖拽 | boolean |
false |
dragLeft |
左侧拖拽 | boolean |
false |
dragTop |
顶部拖拽 | boolean |
false |
dragRight |
右侧拖拽 | boolean |
false |
dragBottom |
底部拖拽 | boolean |
false |
maxWidth |
拖拽最大宽度 | number |
- |
minWidth |
拖拽最大宽度 | number |
- |
maxHeight |
拖拽最大高度 | number |
- |
minHeight |
拖拽最小高度 | number |
- |
Mount
mount with global
// require lib// you can set default global options and events when useVue
mount with component
// require component // component components: VueAutoDrag
Component
<template> <div class="ui-auto-drag-wrap"> <div class="container"> <auto-drag :maxWidth="300" :minWidth="100" class="left-wrap" dragRight> <div class="left">左</div> </auto-drag> <div class="main"> <auto-drag :maxHeight="300" :minHeight="100" class="top-wrap" dragBottom> <div class="top">上</div> </auto-drag> <div class="center"></div> <auto-drag class="bottom-wrap" dragTop> <div class="bottom">下</div> </auto-drag> </div> <auto-drag class="right-wrap" dragLeft> <div class="right">右</div> </auto-drag> </div> <auto-drag class="move-wrap" dragMove> <div class="move">移动</div> </auto-drag> </div></template> <script>import AutoDrag from '../src/index.js';export default { components: { AutoDrag, }};</script> <style lang="scss">.ui-auto-drag-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; display: flex; .container { position: absolute; width: 100%; height: 100%; overflow: hidden; display: flex; } .left-wrap { height: 100%; width: 200px; border-right: 1px solid #e6e6e6; flex-shrink: 0; } .main { width: 100%; height: 100%; overflow: hidden; flex-shrink: 1; display: flex; flex-direction: column; .top-wrap { width: 100%; height: 200px; border-bottom: 1px solid #e6e6e6; flex-shrink: 0; } .center { width: 100%; height: 100%; flex-shrink: 1; } .bottom-wrap { width: 100%; height: 200px; border-top: 1px solid #e6e6e6; flex-shrink: 0; } } .right-wrap { height: 100%; width: 200px; border-left: 1px solid #e6e6e6; flex-shrink: 0; } .move-wrap { position: absolute; left: 100px; top: 100px; z-index: 3; width: 200px; height: 200px; border: 1px solid #e6e6e6; background-color: #f2f2f2; box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.25); }}</style>