特征提取邻域大小受限_您可以通过拖动装订线来更改两个邻域的大小

特征提取邻域大小受限

调整大小 (vue-gutter-resize)

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

对于vue-gutter-resize，可以通过拖动装订线来更改两个邻居dom的尺寸。

View demo 查看演示 Download Source 下载源

用法 (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

  宽度： String

  • column-gutter width
    装订线槽宽度
  • :width="'800px'":width="'800px'"

• height : String

  高度： String

  • column-gutter height
    装订线槽高度
  • :height="'600px'":height="'600px'"

• gutterSize : String

  gutterSize： String

  • all gutter width
    所有装订线宽度
  • :gutterSize="'4px'":gutterSize="'4px'"

• gutterSizes : Array<String>

  gutterSizes： Array<String>

  • each gutter width
    每个装订线宽度
  • If gutterSize is specified, gutterSize takes precedence
    如果指定了gutterSize，则gutterSize优先
  • :gutterSizes="['7px', '1rem']":gutterSizes="['7px', '1rem']"

• color : String

  颜色： String

  • all gutter color
    所有装订线颜色
  • :color="'green'":color="'green'"

• colors : Array<String>

  颜色： Array<String>

  • each gutter clolr
    每个装订线
  • If color is specified, color takes precedence
    如果指定了颜色，则颜色优先
  • :colors="['red', 'blue']":colors="['red', 'blue']"

• column : Number

  列： Number

  • column number
    列号
  • :column="3":column="3"

• columnSizes: Array<Number>

  columnSizes： Array<Number>

  • column size(total 100)
    列大小(总计100)
  • :columnSizes="[1, 2, 3]":columnSizes="[1, 2, 3]"

发射 (emit)

• resize({ col }): Object

  resize({col})： Object

  • Array<Number>Array<Number>
  • each column width(total 100)
    每列宽度(总计100)

插槽 (slot)

Specified by col-n

由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

  宽度： String

  • row-gutter width
    行槽宽度
  • :width="'800px'":width="'800px'"

• height : String

  高度： String

  • row-gutter height
    行槽高度
  • :height="'600px'":height="'600px'"

• gutterSize : String

  gutterSize： String

  • all gutter height
    所有排水沟高度
  • :gutterSize="'4px'":gutterSize="'4px'"

• gutterSizes : Array<String>

  gutterSizes： Array<String>

  • each gutter height
    每个装订线的高度
  • If gutterSize is specified, gutterSize takes precedence
    如果指定了gutterSize，则gutterSize优先
  • :gutterSizes="['7px', '1rem']":gutterSizes="['7px', '1rem']"

• color : String

  颜色： String

  • all gutterの color
    所有装订线の颜色
  • :color="'green'":color="'green'"

• colors : Array<String>

  颜色： Array<String>

  • each gutter color
    每个装订线颜色
  • If color is specified, color takes precedence
    如果指定了颜色，则颜色优先
  • :colors="['red', 'blue']":colors="['red', 'blue']"

• row : Number

  行： Number

  • row number
    行号
  • :row="3":row="3"

• rowSizes: Array<Number>

  rowSizes： Array<Number>

  • row size(total 100)
    行大小(总计100)
  • :rowSizes="[1, 2, 3]":rowSizes="[1, 2, 3]"

发射 (emit)

• resize({ row }): Object

  resize({row})： Object

  • Array<Number>Array<Number>
  • each column height(total 100)
    每列高度(总计100)

插槽 (slot)

Specified by row-n

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

翻译自: https://vuejsexamples.com/you-can-change-the-size-of-both-neighbor-dom-by-dragging-gutter/

特征提取邻域大小受限