@codernote/record-list NPM

记录软件 - 记录列表

记录软件右侧记录列表组件，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"

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

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

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

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

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

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

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

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

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

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

  {/* 事件：改动标签 */}
  @changeNoteTag="handleChangeNoteTag"

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

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

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

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

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