网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
vue-grid-designer是一款Vue.js模板/组件,使用sortable.js库构建可自定义,可排序,可拖动的网格布局插件。
1.将vue-grid-designer导入到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.将vue-grid-designer添加到模板。
<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: () => {
}
}
转载请注明来源:可视化拖拽、排序Vue布局模板/组件(vue-grid-designer)
本文永久链接地址:https://www.moyouyouw.cn/code/1271.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论