/ Miscellaneous

you can change the size of both neighbor dom by dragging gutter

you can change the size of both neighbor dom by dragging gutter

vue-gutter-resize

For vue-gutter-resize, you can change the size of both neighbor dom by dragging gutter.

Usage

install

yarn add vue-gutter-resize
# or
npm i vue-gutter-resize

All import

import Vue from 'vue/dist/vue.esm.js'
import VueGutterResize from 'vue-gutter-resize'
Vue.use(VueGutterResize)

Import as much as you need

import { columnGutter } from 'vue-gutter-resize'

Import by module

// esm module
import { columnGutter } from 'vue-gutter-resize/dist/vue-gutter-resize.esm.js'
// umd module
import { columnGutter } from 'vue-gutter-resize/dist/vue-gutter-resize.umd.js'
// commonjs module
import { columnGutter } from 'vue-gutter-resize/dist/vue-gutter-resize.js'

Column Gutter

<template>
  <div>
    <column-gutter
      :column="column"
      :width="'100vw'"
      :height="'600px'"
      :gutterSizes="['4px', '1rem', '1em']"
      :colors="colors"
      :columnSizes="[4, 1, 4, 1]"
      @resize="resize">
      <div slot="col-0">0</div>
      <div slot="col-1">1</div>
      <div slot="col-2">2</div>
      <div slot="col-3">3</div>
    </column-gutter>
  </div>
</template>

<script>
import { columnGutter } from 'vue-gutter-resize'

export default {
  data(){
    return {
      column: 4,
      colors: ['red', 'blue', 'yellow']
    }
  },
  methods: {
    resize ({ col }) {
      console.log(col) // current col size (etc... [25, 25, 25, 25]
    }
  },
  components: {
    'column-gutter': columnGutter
  }
}
</script>

Row Gutter

<template>
  <div>
    <row-gutter
      style="border: 1px solid #ccc;"
      :row="row"
      :width="'800px'"
      :height="'600px'"
      :gutterSize="'4px'"
      :colors="colors"
      :rowSizes="[1, 2, 3, 4]"
      @resize="resize">
      <div slot="row-0">0</div>
      <div slot="row-1">1</div>
      <div slot="row-2">2</div>
      <div slot="row-3">3</div>
    </row-gutter>
  </div>
</template>

<script>
import { rowGutter } from 'vue-gutter-resize'

export default {
  data(){
    return {
      row: 4,
      colors: ['red', 'blue', 'yellow']
    }
  },
  methods: {
    resize ({ row }) {
      console.log(row) // current row size (etc... [25, 25, 25, 25]
    }
  },
  components: {
    'row-gutter': rowGutter
  }
}
</script>

all gutter

column-gutter

props

  • width: String
    • column-gutter width
    • :width="'800px'"
  • height : String
    • column-gutter height
    • :height="'600px'"
  • gutterSize : String
    • all gutter width
    • :gutterSize="'4px'"
  • gutterSizes : Array<String>
    • each gutter width
    • If gutterSize is specified, gutterSize takes precedence
    • :gutterSizes="['7px', '1rem']"
  • color : String
    • all gutter color
    • :color="'green'"
  • colors : Array<String>
    • each gutter clolr
    • If color is specified, color takes precedence
    • :colors="['red', 'blue']"
  • column : Number
    • column number
    • :column="3"
  • columnSizes: Array<Number>
    • column size(total 100)
    • :columnSizes="[1, 2, 3]"

emit

  • resize({ col }): Object
    • col : Array<Number>
    • each column width(total 100)

slot

Specified by col-n

<div slot="col-0">the first column</div>
<div slot="col-1">the second column</div>
<div slot="col-2">the third column</div>

row-gutter

props

  • width: String
    • row-gutter width
    • :width="'800px'"
  • height : String
    • row-gutter height
    • :height="'600px'"
  • gutterSize : String
    • all gutter height
    • :gutterSize="'4px'"
  • gutterSizes : Array<String>
    • each gutter height
    • If gutterSize is specified, gutterSize takes precedence
    • :gutterSizes="['7px', '1rem']"
  • color : String
    • all gutterの color
    • :color="'green'"
  • colors : Array<String>
    • each gutter color
    • If color is specified, color takes precedence
    • :colors="['red', 'blue']"
  • row : Number
    • row number
    • :row="3"
  • rowSizes: Array<Number>
    • row size(total 100)
    • :rowSizes="[1, 2, 3]"

emit

  • resize({ row }): Object
    • row : Array<Number>
    • each column height(total 100)

slot

Specified by row-n

<div slot="row-0">the first row</div>
<div slot="row-1">the second row</div>
<div slot="row-2">the third row</div>

GitHub