插件名称 | vue-grid-designer |
---|---|
版本号 | v1.0.5 |
发布时间 | 2020年9月25日 |
插件作者 | TheFoot |
Grid Designer是一个Vue.js组件,用于使用sortable.js库构建可自定义,可排序,可拖动的网格系统。
# NPM
$ npm i @thefootonline/vue-grid-designer --save
v1.0.5(04/07/2021)
1.将网格设计器导入Vue项目。
import Vue from 'vue';
import VueGridDesigner from '@thefootonline/vue-grid-designer';
2.注册组件。
// global component
Vue.component('vue-grid-designer', VueGridDesigner);
// locally
export default {
...
components: { VueGridDesigner }
...
};
3.将网格设计器添加到模板。
<template>
<div>
<vue-grid-designer v-model="grid"></vue-grid-designer>
</div>
</template>
export default {
components: { VueGridDesigner },
data () {
return {
grid: [{
blocks: [{
span: 1,
content: '<p>1</p>'
},{
span: 2,
content: '<p>2</p>'
},{
span: 3,
content: '<p>3</p>'
}]
}]
};
}
};
4.可用道具。
// The v-model grid data; rows and blocks
value: {
type : Array,
default: () => []
},
// Component mode - edit or view
mode: {
type : String,
default : 'edit',
validator: ( prop ) => [ 'edit', 'view' ].includes ( prop )
},
// Logical blocks per row
blocksPerRow: {
type : Number,
default: 4
},
// Maximum number of rows
maxRows: {
type : Number,
default: 0
},
// CSS row class
rowClass: {
type : String,
default: ''
},
// CSS block class
blockClass: {
type : String,
default: ''
},
// Minimum block height - in pixels
minBlockHeight: {
type : Number,
default: 100
},
// Block margin - in pixels
blockMargin: {
type : Number,
default: 6
},
// Allow blocks to be moved between rows
enableMoveBlocksBetweenRows: {
type : Boolean,
default: true
},
// New row callback - allows decoration of the new row object (async)
onNewRow: {
type : Function
},
// New block callback - allows decoration of the new block object (async)
onNewBlock: {
type : Function
},
/*
SortableJS Props with local defaults and managed locally
*/
// CSS Class for the ghost position indicator element
sortableGhostClass: {
type : String,
default: 'vgd__block--ghost'
},
// CSS Class for the selected element
sortableChosenClass: {
type : String,
default: 'vgd__block--chosen'
},
// CSS Class for the element when dragged
sortableDragClass: {
type : String,
default: 'vgd__block--drag'
},
// Animation speed. 0 for no animation
sortableAnimation: {
type : Number,
default: 50
},
// Pass-thru remaining SortableJS options
sortableOptions: {
type : Object,
default: () => {
}
}