vue-grid-layout 事件列表

vue-grid-layout grid-layout和grid-item完整的事件列表

vue-grid-layout 属性列表

vue-grid-layout grid-layout和grid-item完整的属性列表

2023年新年快乐,The world is always beautiful

2023年新年快乐,The world is always beautiful

gridster.js 方法列表

gridster.js 有100多个函数方法,我们将列举add_widget resize_widget remove_widget remove_all_widgets serialize serialize_changed enable disable enable_resize disable_resize这几个常用的函数,其余函数请查看文章结尾的连接。

gridster.js 属性列表

本文将列举 gridster.js 的属性列表及其使用方法。

gridster.js 交换模式

gridster.js 设置shift_larger_widgets_down 为 false 时可以开启交换模式,所谓的交换模式,当往下拖动1个单元格时,遇到比它大的单元格不会把这个大的单元格挤到更下面去。

gridster.js 响应式布局网格

gridster.js 支持响应式布局网格模式,利用min_cols max_cols widget_base_dimensions 三个属性可以实现gridster.js网格响应屏幕的宽度。

gridster.js 缩放相关的回调函数

gridster.js 缩放相关的回调函数,开始缩放 start、缩放中 resize、停止缩放 stop。

gridster.js 拖动相关的回调函数

gridster.js 拖动相关的回调函数,本文将演示 start drag stop 三个回调函数,分别表示开始拖动、拖动中、结束拖动。

gridster.js 限制单元格大小

我们可以通过 gridster.js data-max-sizex, data-max-sizey, data-min-sizex and data-min-sizey 属性限制单元格大小,比如放大缩小时最多只能跨3行3列。

gridster.js resize_widget 修改单元格大小

gridster.js 提供了 resize_widget 函数可以修改某个单元格的大小,

一个网页多个 gridster.js 实例

在一个网页创建多个 gridster.js 实例的完整代码例子,gridster.js 通过 namespace 选项来确定 gridster.js 生成的CSS代码的范围。

gridster.js 序列化创建网格

gridster.js 通过 sort_by_row_and_col_asc、sort_by_row_asc 、sort_by_row_desc 、sort_by_col_asc、sort_by_col_desc 方法序列化网格数组并创建网格。

gridster.js 展开选中单元格

gridster.js 通过 resize_widget 方法展开选中单元格,实现鼠标悬浮在单元格上放大单元格的效果。

gridster.js 自定义拖拽句柄

gridster.js 自定义拖拽句柄,只有鼠标按住该元素才允许拖动单元格。

gridster.js 动态添加单元格

gridster.js 使用add_widget方法从数组 Array(而不是HTML)中创建添加单元格小部件的网格,未指定小部件位置(col, row)。

vue3 复制粘贴

vue3 可以通过 useClipboard 简单的实现复制粘贴功能。

ag-grid width 定义列宽

ag-grid 支持按像素和比例定义列宽,如果定义列时 width 表示按像素设置列的宽度,flex 表示按比例定义宽度,flex 的 优先级高于 width 。

vue3 父组件调用子组件的方法

vue3 父组件调用子组件的方法是通过 expose 和 ref 来实现的,我们可以通过 expose 来控制父组件可以访问子组件那些的方法和对象。

vue3 注册组件

开发好组件后,我们需要使用组件就需要注册组件,我们可以根据自己的使用情况进行局部注册组件、全局注册组件、自动注册组件。