vue-drag-select
🔧Installation
npm i @coleqiu/vue-drag-selectyarn add @coleqiu/vue-drag-select📘Demo
🧭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 |
--(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 | -- |
| <!-- disabled | whether DragSelect is disabled | boolean | false --> |
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 |