Blog Detail

6

Aug
A List Picker Component  made with Vue Js cover image

A List Picker Component made with Vue Js

Igor Guastalla launched a Vue list Picker made with vue js. It is a dual list picker component for Vue.js, which allows the users to move list items between two panels.

Installation

You've to run this command for the installation via npm:

$ npm install vue-list-picker --save

Or you can install it via Yarn:

$ yarn add vue-list-picker

Quick start

Vue.js

You can import in your main.js file

import Vue from "vue";
import VueListPicker from "vue-list-picker";

Vue.use(VueListPicker);
Or locally in any component
import { VueListPicker } from "vue-list-picker";

export default {
  components: {
    VueListPicker,
  },
};

Nuxt.js

You can import as a Nuxt.js plugin

~/plugins/vue-list-picker.js
import Vue from "vue";
import VueListPicker from "vue-list-picker";

Vue.use(VueListPicker);

And then you have to import it in your nuxt.config.js file.

plugins: ["~/plugins/vue-list-picker.js"];

There's a window mouseup event listener so you should use the tag

Basic usage

<template>
  <vue-list-picker :left-items="leftItems" :right-items="rightItems" />
</template>

<script>
  export default {
    data() {
      const example1 = {
        key: 1,
        content: "Item 1",
      };
      const example2 = {
        key: 2,
        content: "Item 2",
      };
      const example3 = {
        key: 3,
        content: "Item 3",
      };
      const example4 = {
        key: 4,
        content: "Item 4",
      };

      const leftItems = [example1, example2];
      const rightItems = [example3, example4];

      return { leftItems, rightItems };
    },
  };
</script>

Demo

You can view its demo here: https://vuelistpicker.now.sh

Instructions

Generics

  • Currently, there's no draggable dependency. But if you click and hold your mouse down and drag it into another item in the same column, it will select all of them.
  • The title and content background are both blue (#0052c0), but you can modify those using the content-class and title-class props.
  • The height is not set by default, But it has an overflow-y CSS property, so if you utilize the height prop, you'll have a vertical scroll inside each panel.
  • If you pass anything other than top to movedItemLocation, the item will go to the bottom after the movement.
  • The content key should be a unique key inside each array of objects (left-items / right-items).

Actions

From top to bottom:

  • The first button migrates all the left items to the right.
  • The second button migrates all the selected left items to the right.
  • The third button migrates all the right items to the left.
  • The fourth button migrates all the selected right items to the left.
  • The fifth button unselects all the selected items from all columns (left and right).

If you want to dig more about it, You can visit Github for its detailed documentation.

Published at : 06-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project