vue-gutter-resize

言語 : en

vue-gutter-resizeは、gutterをドラッグすると両隣のdomのサイズを変更できます。

デモ

Browsers support

Chrome	Safari
last version	last version

使い方

インストール

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

全体import

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

必要な分だけimport

import { ColumnGutter } from 'vue-gutter-resize'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'

module別import

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

Column Gutter

<template>
  <column-gutter
    :column="column"
    :width="'100vw'"
    :height="'600px'"
    :gutter-sizes="['4px', '1rem', '1em']"
    :colors="colors"
    :column-sizes="[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>
</template>

<script>
import { ColumnGutter } from 'vue-gutter-resize'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'

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

Row Gutter

<template>
  <row-gutter
    style="border: 1px solid #ccc;"
    :row="row"
    :width="'800px'"
    :height="'600px'"
    :gutter-size="'4px'"
    :colors="colors"
    :row-sizes="[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>
</template>

<script>
import { RowGutter } from 'vue-gutter-resize'
import 'vue-gutter-resize/dist/vue-gutter-resize.css'

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

全てのgutter

column-gutter

props

• width: String
  • column-gutterの横幅
  • 必須
  • 例: :width="'800px'"
• height : String
  • column-gutterの縦幅
  • 必須
  • 例: :height="'600px'"
• gutter-size : String
  • 全gutterの幅
  • 例: :gutter-size="'4px'"
• gutter-sizes : Array<String>
  • それぞれのgutterの幅
  • gutter-sizeが指定されている場合、gutter-sizeが優先される
  • 例: :gutter-sizes="['7px', '1rem']"
• color : String
  • 全gutterの色
  • 例: :color="'green'"
• colors : Array<String>
  • それぞれのgutterの色
  • colorが指定されている場合、colorが優先される
  • 例: :colors="['red', 'blue']"
• column : Number
  • column数
  • 必須
  • 例: :column="3"
• column-sizes: Array<Number>
  • columnのサイズ(合計で100)
  • 例: :column-sizes="[1, 2, 3]"

emit

• resize({ col }): Object
  • col : Array<Number>
  • それぞれのcolumnの幅(合計で100)

slot

col-nで指定

<div slot="col-0">1つ目のcolumn</div>
<div slot="col-1">2つ目のcolumn</div>
<div slot="col-2">3つ目のcolumn</div>

row-gutter

props

• width: String
  • row-gutterの横幅
  • 必須
  • 例: :width="'800px'"
• height : String
  • row-gutterの縦幅
  • 必須
  • 例: :height="'600px'"
• gutter-size : String
  • 全gutterの幅
  • 例: :gutter-size="'4px'"
• gutter-sizes : Array<String>
  • それぞれのgutterの幅
  • gutter-sizeが指定されている場合、gutter-sizeが優先される
  • 例: :gutter-sizes="['7px', '1rem']"
• color : String
  • 全gutterの色
  • 例: :color="'green'"
• colors : Array<String>
  • それぞれのgutterの色
  • colorが指定されている場合、colorが優先される
  • 例: :colors="['red', 'blue']"
• row : Number
  • row数
  • 必須
  • 例: :row="3"
• row-sizes: Array<Number>
  • rowのサイズ(合計で100)
  • 例: :row-sizes="[1, 2, 3]"

emit

• resize({ row }): Object
  • row : Array<Number>
  • それぞれのcolumnの幅(合計で100)

slot

row-nで指定

<div slot="row-0">1つ目のrow</div>
<div slot="row-1">2つ目のrow</div>
<div slot="row-2">3つ目のrow</div>

サンプル

https://github.com/tomatoaiu/vue-gutter-resize-example

ライセンス

MIT