vue-resizable-box

v1.2.4

Published

4 years ago

A vue resizable container component.

0High
0Medium
0Low

guili

vue vue2 resizable-box expand resize collapsible resizable draggable extensible

vue-resizable-box

Introduction

A vue component, built up based on Vue.js v2.x.

Features

Collapsible, Resizable, Draggable, Extensible

Installation

npm or yarn (Recommended)

$ npm i vue-resizable-box --save

$ yarn add vue-resizable-box

CDN

Include 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>

Usage

For Es6 (Recommended)

<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>

⚠️ look out

<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

For Commonjs

...
const Vue = require('vue').default
const ResizableBox = require('vue-resizable-box')
Vue.use(ResizableBox)
...

AMD

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

For CDN

<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.

Props

mode
Used to initialize boxes arrangement.There are two modes,horizontal and vertical, default mode is horizontal.
resizable
Used to define if the box is resizable,Default true.

option

Used to set every box's configuration.It's an Object,which it's keys are slots of every box,and it's values are configurations of every box.The values could be number or string or object,but you must config consistently.

You can see as follows:

left: { // 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
    }]
  }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vue-resizable-box

Introduction

Features

Installation

npm or yarn (Recommended)

CDN

Usage

For Es6 (Recommended)

⚠️ look out

For Commonjs

AMD

For CDN

Props