yklist v1.0.32

YKList

一个简洁、强大、易用、高性能的VueJS列表显示控件。 如果您对YKList有更多功能需求或建议，请给我留言。 如果您希望扩展和完善YKList，欢迎加入！

关键特性

1. 高性能.支持海量数据的列表显示; 数据显示的瓶颈取决于计算机的内存大小和数据准备的时间；数据显示的效率接近操作系统原生的 列表性能。

2. 一个列表控件即可同时支持垂直列表和水平列表。例如：只需要在控件初始化时设置 "horizontal: true", 即可控制列表的滚动方向为水平。 垂直、水平的显示可以随时切换，无须重新载入页面。

3. 支持键盘导航。上、下、左、右箭头，以及page up, page down, home ,end可以方便的切换热点元素。

4. 默认支持鼠标框选。按下鼠标不放，拖动鼠标即可完成矩形多选。鼠标框选的自动滚动。

5. 默认支持键盘+键盘的组合选择。支持点击鼠标/按下方向键时，和shift/ctrl一起控制选择范围。

6. 内置易用、精简的事件自定义处理，可精确探测任意点击位置下的列表元素。

7. 动态数据修改

   • 可以动态全部替换数据
   • 可以动态删除指定元素
   • 可以动态添加元素
   • 可以动态修改列表水平/垂直方向
   • 可以动态修改列表元素尺寸

8. 灵活、自由的功能扩展支持

   • 通过开放的slot接口，可以访问和自定义每一个元素的外观、行为；
   • 包括轻松实现包括拖拽在内的自定义元素交互；

9. 使用MIT许可证. 可随意应用于商业用途。

快速开始：

安装

npm install yklist

在项目中引用YKList

import YKList from "yklist";
import "yklist/dist/yklist.css";

简单示例：

<template>
  <YKList ref="ykList1" :settings="settings" :listData="listData" height="600px">
    <template v-slot:YKListItems="YKListItems">
      <div style="user-select: none;">
        {{ YKListItems.item.name }}, {{ YKListItems.index }}
      </div>
    </template>
  </YKList>
</template>

import YKList from "yklist";
import "yklist/dist/yklist.css";

export default {
		name: 'App',
		components: {
			YKList
		},
        listData: [{name:'name1'},{name:'name2'},{name:'name3'}],
		data() {
			return {
				settings: {
					id: "ykList1",
                    keyNaviBy: "name",
			}
		},
}		

使用说明

初始化设置 settings

初始化设置 - listData

存储列表数据的json数组，例如： {name:"name-1", id:1},...{name:"name-n", id:n}

初始化设置 - height

设置列表高度，您可以在运行时调用setHeight方法，或者修改height的值动态改变列表高度

方法

事件

• onListClick(event, itemInfo) 列表被单击时触发，用于获取鼠标点击位置下的坐标、列表元素信息 例如：

<YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
              @onListClick="onListClick"
>
....
onListClick(event, itemInfo) {
    console.log("onListClick", event, itemInfo);
},

• onListDblClick(event, itemInfo) 列表被双击时触发，用于获取鼠标点击位置下的坐标、列表元素信息 例如：

<YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
              @onListDblClick="onListDblClick"
>
....
onListDblClick(event, itemInfo) {
    console.log("onListDblClick", event, itemInfo);
},

• onMouseMove(event, itemInfo) 鼠标移动过程中，对鼠标位置、元素进行探测 例如：

<YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
              @onMouseMove="onMouseMove"
>
....
onMouseMove(event, itemInfo) {
    console.log("onMouseMove", event, itemInfo);
},

• onItemUnderMouseChanged(itemInfo) 鼠标在列表范围内移动时，会不断探测鼠标坐标下的列表元素，如果探测到的元素和上一次探测的结果不一样，则触发本事件

<YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
              @onItemUnderMouseChanged="onItemUnderMouseChanged"
>
....
onItemAtMouseChanged(itemInfo) {
    console.log("onItemUnderMouseChanged", itemInfo);
},

• onSelectedChange(valNew) 当存储已选中元素的索引的数组发生改变时触发

<YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
              @onSelectedChange="onSelectedChange"
>
....
onSelectedChange(valNew) {
    console.log("onSelectedChange", valNew);
},

• onContextMenu(event, itemInfo) 右键进行点击时

<YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
              @onContextMenu="onContextMenu"
>
....
onContextMenu(event, itemInfo) {
    console.log("onContextMenu", event, itemInfo);
},