@codernote/record-tree-vue3

记录软件 - 记录树

记录软件左侧记录树组件, vue3 使用

安装

npm install --save @codernote/record-tree-vue3

数据结构

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;
}>;

使用

import { RecordTree } from "@codernote/record-tree-vue3";

<RecordTree
  :note="note"
  :tags="tags"
></RecordTree>

props

<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