1.0.4 • Published 5 years ago
vue-auto-drag v1.0.4
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
import Vue from 'vue'
import VueAutoDrag from 'vue-auto-drag'
// you can set default global options and events when use
Vue.use(VueAutoDrag)
mount with component
// require component
import VueAutoDrag from 'vue-auto-drag'
// component
export default {
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>
Author
#License