vue3-ts-grid-layout

关于 vue3-ts-grid-layout

vue3-ts-grid-layout VUE 3 响应式网格布局基于 JBaysolution 的 vue-grid-layout 的原始工具。

这个新的和重构的组件具有更多功能、类型安全的 Emits、Props 和严格的 linting 规则设置。

为测试目的而开发的适当应用程序。

文档网站包含 13 个示例。将在向组件添加新功能时更新。

Donate

Features:

• Prop in GridLayout for distributing GridItem's equally.
• GridLayout now has slot for GridItem.
• Prop for displaying grid lines in GridLayout.
• Prop for setting edit mode in GridLayout. Shortcuts the isDraggable and isResizable props.
• Prop for adding border radius in GridLayout. Adds a 8px radius to each GridItem.
• Prop in GridLayout for shifting GridItems horizontally when dragging instead of vertical.
• Separated out style variables, so it is easier to restyle the component.
• Added tab navigation support.
• Close button in GridItem for removing the GridItem from the GridLayout.
• Added more events to GridLayout and GridItem.
• Support for resize Bottom, Bottom Right and Right in GridIem.
• Draggable widgets
• Resizable widgets
• Static widgets
• Bounds checking for dragging and resizing
• Widgets may be added or removed without rebuilding grid
• Layout can be serialized and restored
• Automatic RTL support
• Responsive using predefined layout's for different breakpoints.
• GridItem automatically resizes when content change(Useful when displaying charts).

Testing:

• Unit tests Using Vitest
• Unit test console Using Vitest UI
• e2e tests Using nightwatchjs

Changelog

项目中使用

使用手册

Auditing the package

 npm audit --registry=https://registry.npmjs.org/

References

• Mini.css used in the sandbox
• Vue-Multiselect used in the sandbox
• Vitest
• Vitest UI
• nightwatchjs