记录软件左侧记录树组件, vue3
npm install --save @codernote/record-tree
import { RecordTree } from "@codernote/record-tree";
<RecordTree
:note="note"
:tags="tags"
></RecordTree>
note.content
interface Nodes Array<{
// 节点唯一标识
uuid: string;
// 节点类型,纯文本节点type不设
type?: "image" | "video" | "audio" | "file";
// 节点文本
// 当普通文本节点时(无type), 取text进行渲染
text?: string;
// 有type时,content标识相关类型数据
// 存储远程资源url, 如https://xxx/xxx/xx.png
content?: string;
// type=file时,存储文件大小,单位byte
size?: number;
// type=file时,存储文件名
name?: string;
// 子节点
children?: Nodes;
}>;
<RecordTree
{/* 必需,要编辑的note笔记 */}
:note="note"
{/* 是否只读模式,默认false */}
:readOnly="false"
{/* 标签列表 */}
{/* 不传则不展示标签 */}
:tags="tags"
{/* 底层操作栏类型,默认不显示操作栏, false */}
:bar="false"
{/* 是否展示title, 默认true */}
:showTitle="true"
{/* 响应式,若为true, 内部弹框都相对于100%屏幕宽度来计算 */}
:responsive="false"
{/* 启用双击enter, 标题双击回车,会触发事件, 默认false */}
:enableDbEnter="false"
{/* 监测note内容变动的事件 */}
@change="handleChange"
{/* enableDbEnter=true时生效,标题双击回车时触发事件 */}
@dbEnter="handleDbEnter"
></RecordTree>
npm publish