Vue.js的可拖动和可排序网格系统– vue-js-grid

Vue.js的可拖动和可排序网格系统– vue-js-grid
插件名称 vue-js-grid
发布时间 2020年11月12日
插件作者 euvl

这是用于Vue.js 2.x应用程序的响应式网格系统,支持平滑排序,拖放和重新排序。

安装和下载:

# NPM
$ npm install vue-js-grid --save

用法:

导入Vue.js网格。

import Vue from 'vue'
import Grid from 'vue-js-grid'

Vue.use(Grid)

定义网格数据。

data () {
  return {
    items: [
      '1',
      '2',
      '3'
    ]
}

在您的组件中使用它。

<grid
  :draggable="true"
  :sortable="true"
  :items="items"
  :height="100"
  :width="100">
  <template slot="cell" scope="props">
    <div>{{props.item}}</div>
  </template>
</grid>

默认道具。

props: {
  items: {
    type: Array,
    default: () => []
  },
  gridWidth: {
    type: Number,
    default: -1
  },
  cellWidth: {
    type: Number,
    default: 80,
  },
  cellHeight: {
    type: Number,
    default: 80
  },
  draggable: {
    type: Boolean,
    default: false
  },
  dragDelay: {
    type: Number,
    default: 0
  },
  sortable: {
     type: Boolean,
     default: false
  },
  center: {
    type: Boolean,
    default: false
  }
},