@coleqiu/vue-drag-select

vue-drag-select

🔧Installation

npm i @coleqiu/vue-drag-select

yarn add @coleqiu/vue-drag-select

📘Demo

Storybook

🧭Quick Guide

⚙Import

import { createApp } from "vue";
import VueDragSelect from "@coleqiu/vue-drag-select";

const app = createApp(App);
app.use(VueDragSelect);

🚀Usage

<script setup lang="ts">
import { ref } from 'vue';

const selection = ref([]);
const options = [ "item1", "item2", "item3" ];
</script>

<template>
  <drag-select v-model="selection">
    <drag-select-option v-for="item in options" :value="item" :key="item">{{item}}</drag-select-option>
  </drag-select>
</template>

<style>
.drag-select-option {
  width: 100px;
  height: 100px;
  color: #ffffff;
  background: #E37E26;
}

.drag-select-option--selected {
  color: #000000;
  background: #5fdddc;
}
</style>

📖Ducumentation

DragSelect Attributes

Attribute	Description	Type	Default
modelValue / v-model	binding value	Array | Set<string | number>	--(required)
background	background color of drag area, 'none' represent hide this style to avoid override background color of class	string	rgba(66, 153, 225, 0.5
draggableOnOption	can draggable when dragstart event target on DragSelectOption	boolean	true
clickOptionToSelect	whether to enable the click item selection function	boolean	true
clickBlankToClear	whether to enable clicking on blank content to clear the option	boolean	true
dragAreaClass	the class names of drag area	string	--
dragAreaStyle	the class styles of drag area	string	--
selectedOptionClass	the class names of selected DragSelectOption	string	--
selectedOptionStyle	the selected styles of selected DragSelectOption	string	--
multiple	whether to keep the previously selected	boolean	--
activeMultipleKeys	after pressing a certain key, multiple mode will be activated	'meta' | 'shift' | 'ctrl' | 'alt'	'meta' | 'ctrl' | 'shift'
deselectRepeated	in multiple mode, deselect options that are repeatedly selected	boolean	--

DragSelectOption Attributes

Attribute	Description	Type	Default
value	binding value	string | index	--(required)
disabled	whether DragSelectOption is disabled	boolean	false
selectedClass	the class names of selected option	boolean	--

Component classNames

this package havn't enough styles,you can use following classNames to add styles.

name	Description
drag-select__wrapper	the className of DragSelect itself
drag-select	the className of the container of dragSelectOption
drag-select__area	the className of drag area
drag-select-option	the className of dragSelectOption component
drag-select-option--selected	the className of dragSelectOption component which are selected
drag-select-option--disabled	the className of dragSelectOption component which are disabled