A vue component, built up based on Vue.js v2.x.
Collapsible, Resizable, Draggable, Extensible
$ npm i vue-resizable-box --saveor
$ yarn add vue-resizable-boxInclude vue-resizable-box in your HTML file like this:
<script src="https://cdn.jsdelivr.net/npm/vue-resizable-box/dist/vue-resizable-box.js"></script><template>
<resizable-box :option="option">
<template #left>
<div>
<h2>left</h2>
</div>
</template>
<template #center>
<div>
<h2>center</h2>
</div>
</template>
<template #right>
<div>
<h2>right</h2>
</div>
</template>
</resizable-box>
</template>
<script>
import Vue from 'vue'
import ResizableBox from 'vue-resizable-box'
Vue.use(ResizableBox)
export default {
name: 'Sample',
data () {
return {
option: {
left: {
size: 1,
buttons: [{ direction: 'right' }]
},
center: {
size: 2,
buttons: [{
direction: 'left'
}, {
direction: 'right'
}]
},
right: {
size: 1,
buttons: [{ direction: 'left' }]
}
}
}
}
}
</script><template #center> is the same as <template v-slot="center">, but you need vue 2.6+.For a detailed explanation,check out the 插槽-Vue.js
...
const Vue = require('vue').default
const ResizableBox = require('vue-resizable-box')
Vue.use(ResizableBox)
...require.config({
paths: {
vue: ['/path/vue'],
'vue-resizable-box': ['/path/vue-resizable-box']
}
})
require(['vue', 'vue-resizable-box'], function(Vue, VueResizableBox) {
var option = {
left: {
size: 1,
buttons: [{
direction: 'right'
}]
},
center: {
size: 2,
buttons: [{
direction: 'left'
}, {
direction: 'right'
}]
},
right: {
size: 1,
buttons: [{
direction: 'left'
}]
}
};
Vue.use(VueResizableBox);
new Vue({
data: function() {
return {
option: option
}
},
template: '<vue-resizable-box :option="option">\
<template #left>\
<div>left-content</div>\
</template>\
<template #center>\
<div>right-content</div>\
</template>\
<template #right>\
<div>right-content</div>\
</template>\
</vue-resizable-box>'
}).$mount('#main');
});For example, amd demo
<head>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.box-all {
height: 100%;
}
</style>
</head>
<body>
<div id="main"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resizable-box/dist/vue-resizable-box.js"></script>
<script>
var option = {
left: {
size: 1,
buttons: [{
direction: 'right'
}]
},
center: {
size: 2,
buttons: [{
direction: 'left'
}, {
direction: 'right'
}]
},
right: {
size: 1,
buttons: [{
direction: 'left'
}]
}
};
var option1 = {
top: {
size: 1,
buttons: [{
direction: 'down'
}]
},
center: {
size: 1,
buttons: [{
direction: 'up'
}, {
direction: 'down'
}]
},
bottom: {
size: 1,
buttons: [{
direction: 'up'
}]
}
};
new Vue({
data: function() {
return {
option: option,
option1: option1
}
},
template: '<vue-resizable-box :option="option">\
<template #left>\
<div>left-content</div>\
</template>\
<template #center class="box-all">\
<vue-resizable-box :option="option1" mode="vertical"></vue-resizable-box>\
</template>\
<template #right>\
<div>right-content</div>\
</template>\
</vue-resizable-box>'
}).$mount('#main');
</script>
</body>For example, demo
See more examples here.
-
modeUsed to initialize boxes arrangement.There are two modes,
horizontalandvertical, default mode ishorizontal. -
resizableUsed to define if the box is resizable,Default
true. -
optionUsed to set every box's configuration.It's an Object,which it's
keysareslotsof every box,and it'svaluesare configurations of every box.Thevaluescould benumberorstringorobject,but you must config consistently.You can see as follows:
option type value keystring slots of boxes, eg: leftvaluestring
number
objecteg: 100px,5rem
eg:1,10
as followsleft: { // slot名称一致 fullscreen: false, // 是否启用全屏按钮,默认 false size: 1, // 尺寸比例，必须配置 buttons: [{ direction: 'right', // 方向 left right up down，必须配置 icon: 'icon-arrow icon-arrow-right', // 图标，有默认，可不配置 position: { right: '-1px' }, // 相对于本slot绝对定位位置，有默认，可不配置 isExpanded: true // 默认本slot展开，有默认，可不配置 }] // 可不配置 buttons }
For example, the default option as follows:
{ left: { fullscreen: false, size: 1, buttons: [{ direction: 'right', icon: 'icon-arrow icon-arrow-right', position: { right: '-1px' }, isExpanded: true }] }, right: { fullscreen: false, size: 1, buttons: [{ direction: 'left', icon: 'icon-arrow icon-arrow-left', position: { left: '-1px' }, isExpanded: true }] } }