@codernote/record-list

记录软件 - 记录列表

记录软件右侧记录列表组件，vue3

安装

npm install @codernote/record-list

使用

import { RecordList } from "@codernote/record-list";

<RecordList :noteList="noteList" />

props

<RecordList
  {/* 必需，笔记列表 */}
  :noteList="noteList"

  {/* 选中的笔记 */}
  :activeNote="activeNote"

  {/* 是否展开，默认true */}
  :expand="true"

  {/* 是否展示展开/缩小按钮, 默认false */}
  :showToggle="false"

  {/* 显示模式，
  * normal: 默认模式
  * simple: 只展示列表
  * folder: 文件夹模式
  */}
  mode="normal"

  {/* 支持的标签列表 */}
  :tags="tags"

  {/* 是否显示每条笔记的tag，默认false, 传值则受控 */}
  :tagVisible="false"

  {/* 是否显示标签筛选框, 默认false, 传值则受控*/}
  :tagsShowVisible="false"

  {/* 是否显示日期，默认false, 传值则受控 */}
  :datetimeVisible="false"

  {/* 排序, 1=创建时间， 2=更新时间, 0=自定义排序  */}
  :sort="1"

  {/* 排序类型, DESC | ASC */}
  sortType="DESC"

  {/* 内部过滤 */}
  {/* 目前仅支持过滤待办类型（todo）的条目 */}
  :filter="{todo: true}"

  {/* 是否支持拖拽 */}
  :draggable="false"

  {/* 事件：点击笔记 */}
  {/* (note: Note) => {} */}
  @selectNote="handleSelectNote"

  {/* 事件：切换标签筛选框 */}
  {/* (visible: boolean) => {} */}
  @changeTagsShowVisible="handleChangeTagsShowVisible"

  {/* 事件：切换日期展示 */}
  {/* (visible: boolean) => {} */}
  @changeDatetimeVisible="handleChangeDatetimeVisible"

  {/* 事件：切换标签展示 */}
   {/* (visible: boolean) => {} */}
  @changeTagVisible="handleChangeTagVisible"

  {/* 事件：改动 */}
  @changeNote="handleChangeNote"

  {/* 事件：排序 */}
  {/* (params: {sort, sortType}) => {} */}
  @changeSort="handleChangeSort"

  {/* 事件：分页 */}
  {/* (params: QueryParams) => {} */}
  @changePage="handleChangePage"

  {/* 事件：获取笔记列表 */}
  {/* (params: QueryParams) => {} */}
  @getList="getList"

  {/* 事件：删除笔记 */}
  {/* (note: Note, destroy: Boolean) => {} */}
  @removeNote="handleRemove"

  {/* 事件：展开收起切换 */}
  {/* (toggle: boolean) => {} */}
  @toggle="toggle"

  {/* 事件: drop */}
  {/* (event: DragEvent, params: {id: string, position: string}) => {} */}
  @drop="handleDrop"
/>

发布

npm publish