ProseMirror API

Tiptap编辑器是建立在ProseMirror之上的,ProseMirror有非常强大的API。Tiptap提供了@tiptap/pm包与之匹配,你无需手动安装这些包。

Tiptap 编辑器 Configuration 配置

Tiptap 编辑器的配置相关的知识,包含了如何初始化、扩展的配置及使用方法等,我们也将配合在线例子进行说明。

vue3-drr-grid-layout 从外部拖入单元格

在实际应用场景中,需要从外部比如开发工具的工具栏,拖入到画布(布局)中,vue3-drr-grid-layout 并不能直接实现这个功能,需要我们自己去实现,本文案例将演示该功能。

vue3-drr-grid-layout 单元格拖动事件

vue3-drr-grid-layout 的单元格有move拖动中和moved拖动完成事件,通过拖动事件我们可以获取最新的 vue3-drr-grid-layout布局并保存起来。

vue3-drr-grid-layout 单元格调整大小

在vue3-drr-grid-layout中我们可以通过is-resizable属性设置为true允许用户缩放单元格的大小,并通过resize和resized事件来获取单元格是否进行了缩放。

vue3-drr-grid-layout 制定拖拽元素

vue3-drr-grid-layout 不像 vue-grid-layout 一样设置drag-allow-from属性就可以指定某个元素才能拖动单元格,但是我们可以通过is-draggable属性来实现同样的功能,我们将来样式只能点单元格中的SPAN标签才能通过单元格。

vue3-drr-grid-layout 镜像反转

vue3-drr-grid-layout is-mirrored属性设置镜像反转,就是从左向右还是从右到左对齐。

vue3-drr-grid-layout 响应式布局

vue3-drr-grid-layout 响应式布局,设置responsive和breakpoints可以根据屏幕大小调整布局以达到设配各种屏幕的效果。

vue3-drr-grid-layout 防止碰撞

vue3-drr-grid-layou 设置 prevent-collision 属性可以防止单元格碰撞,就是拖动A1单元格移动到A2单元格时,不会改变A2单元格的位置,拖动时无法改变其他元素的位置。

vue3-drr-grid-layout 动态添加删除单元格

vue3-drr-grid-layout 添加删除单元格只需要对 vue3-drr-grid-layout 的数据源进行添加删除就可以实现单元格的新增和删除功能。

vue3-drr-grid-layout 事件列表

vue3-drr-grid-layout 的 grid-layout和grid-item的组件完整的事件列表以及使用方法。

vue3-drr-grid-layout 属性列表

vue3-drr-grid-layout 和 grid-layout 的属性列表一样,下面列出了vue3-drr-grid-layout的完整属性。

vue3-drr-grid-layout 中文文档

vue3-drr-grid-layout 是 gridster.js 的 vue3 版本的网格布局插件,可以实现单元格的拖拽排序和布局,通常我们可以用vue3-drr-grid-layout来实现自定义工作台、看板这类功能。

vue-grid-layout 外部拖入单元格

本文演示 vue-grid-layout 外部拖入单元格。

vue-grid-layout 动态添加删除单元格

vue-grid-layout 动态添加删除单元格,因为vue最基本的功能就是双向绑定,所以只要对 vue-grid-layout 的数据源进行添加删除就可以实现单元格的新增和删除功能。

vue-grid-layout 防止碰撞

vue-grid-layout 设置 prevent-collision 可以防止单元格碰撞,就是A单元格移动到B单格时,不会改变B单元格的位置。

vue-grid-layout 响应式布局

vue-grid-layout 响应式布局,设置responsive和breakpoints可以根据屏幕大小调整布局以达到设配各种屏幕的效果。

vue-grid-layout 镜像反转

vue-grid-layout 镜像反转,就是从左向右还是从右到左对齐。

vue-grid-layout 只允许某个元素允许拖动

vue-grid-layout 可以设置单元格中只允许某个元素允许拖动。

vue-grid-layout 多个容器

vue-grid-layout 在一个网页中多个多个容器