@coleqiu/vue-drag-select
v2.0.6-beta.1
Published
Drag select component for Vue3
Downloads
1,255
Maintainers
Readme
🔧Installation
npm i @coleqiu/vue-drag-select
yarn 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 | 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