yklist

    1.0.32 • Public • Published

    YKList

    A simple, powerful, easy-to-use, high-performance VueJS ListView UI control. If you have any requirements/suggestion, please leave me a message. If you want to expand and improve YKList, welcome to join!

    Key features

    1. High performance. Support massive data; the bottleneck depends on the memory size of the computer and the time of data preparation; the efficiency of data display is close to that of the operating system.

    2. Just one component can support both vertical and horizontal display. The display mode can be switched at any time without reloading the page.

    3. Support keyboard navigation. Up, down, left, and right arrows, as well as page up, page down, home, and end, can easily switch the hotspot elements.

    4. Support mouse drag&select. Not only that, press and hold the mouse, drag the mouse and move, the page scrolling will be triggered automatically at any time.

    5. Support keyboard combination selection. Just press shift/ctrl when mouse select or keybord navigation, you'll got a smart selection enhancement.

    6. Built-in easy-to-use and streamlined event custom processing, which can accurately detect list elements under any position of mouse click .

    7. Dynamic data/property modification

      • Can replace all data dynamically
      • Can dynamically delete specified elements
      • Can dynamically add elements
      • Can dynamically modify the horizontal/vertical direction of the list
      • Can dynamically modify the size of list elements
    8. Flexible and free function expansion support

      • Through the open slot interface, you can access and customize the appearance and behavior of each element;
      • Including easy interaction of custom elements including drag and drop;
    9. Use MIT license. Can be used for commercial purposes at will.

    Quick Start

    install

    npm install yklist
    

    import YKList in your vue project

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

    simple example

    <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'},{name:'name4'}],
            data() {
                return {
                    settings: {
                        id: "ykList1",
                        keyNaviBy: "name",
                }
            },
    }		
    

    Instructions

    Property - settings

    Properties Description Example
    id required; unique identifier id: "ykList1"
    keyNaviBy optional; select the property of list data to enable keyboard character navigation keyNaviBy: "name"
    itemSize optional; set the size of the list elements itemSize: {width:200,height:50}
    height optional; set the height of the list, the unit must be px or percentage height: "600px"
    horizontal optional; set whether it is a horizontal list horizontal:true
    checkBeforeDragSelection optional, customize a method to check before dragging selection, if the method returns false then drag selection is not allowed checkBeforeDragSelection: function (event, itemInfo){return false;}

    Property - listData

    the json object array which stored the list data,e.g.: [{name:"name1", id:1},...{name:"namen", id:n}]

    Property - height

    set up the list height, you may call the method 'setHeight' or modify the height property at runtime.

    Method

    Method Description Example
    setHeight Set the height of YKList, the height can be px or percentage this.$refs.ykList1.setHeight("800px");
    setItemSize Set the size of the list elements this.$refs.ykList1.setItemSize({width:200, height:36});
    setHorizontal Set whether the list scrolls horizontally this.$refs.ykList1.setHorizontal(!this.$refs.ykList1.getHorizontal());
    appendItem Add an element to the end of the list this.$refs.ykList1.appendItem({name: 'yklist123'});
    removeItems Remove list elements, the input parameter is an array
    getItemsData Get a group of data corresponding to a set of elementsv console.log(this.$refs.ykList1.getItems(this.$refs.ykList1.getSelectedItems()));
    getItemData Get one data corresponding to a set of elements console.log(this.$refs.ykList1.getItemData(this.$refs.ykList1.getHotItem()));
    setListData change all the list data at runtime this.$refs.ykList1.setListData(newListData);
    getSelectedItems Get the selected element array var selectedItems=this.$refs.ykList1.getSelectedItems();

    Event

    • onListClick(event, itemInfo) Triggered when the list is clicked, used to obtain the coordinates/list element under the mouse. E.g:
    <YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
                  @onListClick="onListClick"
    >
    ....
    onListClick(event, itemInfo) {
        console.log("onListClick", event, itemInfo);
    },
    
    
    • onListDblClick(event, itemInfo) Triggered when the list is double clicked, used to obtain the coordinates/list element under the mouse. E.g:
    <YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
                  @onListDblClick="onListDblClick"
    >
    ....
    onListDblClick(event, itemInfo) {
        console.log("onListDblClick", event, itemInfo);
    },
    
    
    • onMouseMove(event, itemInfo) Detect the mouse position and elements during the mouse movement E.g:
    <YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
                  @onMouseMove="onMouseMove"
    >
    ....
    onMouseMove(event, itemInfo) {
        console.log("onMouseMove", event, itemInfo);
    },
    
    
    • onItemUnderMouseChanged(itemInfo) When moving mouse within list, it will detect the list elements continuously under the mouse coordinates. If the detected element is different from the last detection result, this event will be triggered
    <YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
                  @onItemUnderMouseChanged="onItemUnderMouseChanged"
    >
    ....
    onItemUnderMouseChanged( itemInfo) {
        console.log("onItemUnderMouseChanged", itemInfo);
    },
    
    
    • onSelectedChange(valNew) Fires when the array storing the index of the selected element changes
    <YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
                  @onSelectedChange="onSelectedChange"
    >
    ....
    onSelectedChange(valNew) {
        console.log("onSelectedChange", valNew);
    },
    
    
    • onContextMenu(event, itemInfo) Fires when mouse right button click the list item
    <YKList ref="ykList1" :settings="settings" :listData="listData" :height="height"
                  @onContextMenu="onContextMenu"
    >
    ....
    onContextMenu(event, itemInfo) {
        console.log("onContextMenu", event, itemInfo);
    },
    
    

    Install

    npm i yklist

    DownloadsWeekly Downloads

    43

    Version

    1.0.32

    License

    MIT

    Unpacked Size

    1.38 MB

    Total Files

    23

    Last publish

    Collaborators

    • yklist