浅谈Vue个性化dashBoard 布局
2024-10-19 11:44:08
dashBoard布局在管理系统使用比较多;使用自己喜欢的方式进行自定义布局
使用npm 安装
npm install vue-grid-layout
全局使用
import vueGridLayout from 'vue-grid-layout';
Vue.use(vueGridLayout);
局部使用
var GridLayout = vueGridLayout.GridLayout;
var GridItem = vueGridLayout.GridItem;
注册组件
components:{
GridLayout,
GridItem,
},
数据源
var testLayout = [
{"x":0,"y":0,"w":2,"h":2,"i":"0",compentent:"组件"},
{"x":2,"y":0,"w":2,"h":4,"i":"1",compentent:"组件"},
{"x":4,"y":0,"w":2,"h":5,"i":"2",compentent:"组件"},
{"x":6,"y":0,"w":2,"h":3,"i":"3",compentent:"组件"},
];
渲染
<grid-layout
:layout="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
<component v-bind:is="item.component"> </component>
</grid-item>
</grid-layout>
参数配置
autoSize Boolean true 是否根据内容确定容器的高度
isDraggable Boolean true 是否支持推拽
isResizable Boolean true 是否支持改变大小
useCssTransforms Boolean true 是否使用自定义的过渡效果
verticalCompact Boolean true 是否使用verticalCompact布局
layout Array - 布局位置
事件
@resize="resizeEvent" //托拽时
@move="moveEvent" //移动时
@resized="resizedEvent" //托拽结束
@moved="movedEvent" //移动停止
是不错的dashBoard布局选择,参考来源
https://github.com/jbaysolutions/vue-grid-layout
最新文章
- 敏捷遇上UML-需求分析及软件设计最佳实践(郑州站 2014-6-7)
- 程序设计入门——C语言 第8周编程练习 2GPS数据处理(6分)
- oracle分组查询实例ORA-00979和ORA-00937错误分析
- php array 分页
- IE8以下不支持getElementsByClassName方法
- java 静态构造函数
- objectC时间用法
- [刷题codeforces]650A.637A
- 关于JS的时间控制实现动态效果及实例操作
- MySQL(三)
- Ajax请求中的async:false/true(同步/异步)的作用
- 项目中的Launch_getSecurityEntitle_postlaunch
- 【转载】VC维,结构风险最小化
- UVa 12099 The Bookcase - 动态规划
- 转载:索引与分片 plus
- java的几个日志框架log4j、logback、common-logging
- ASP.NET Web Pages:表单
- POJ2533_Longest Ordered Subsequence (线性动态规划变形)
- java绝对路径和相对路径的理解
- C#中资源文件的使用