Skip to content

Latest commit

 

History

History
116 lines (100 loc) · 4.28 KB

README.md

File metadata and controls

116 lines (100 loc) · 4.28 KB

vue-drag-select

🔧Installation

npm i @coleqiu/vue-drag-select
yarn add @coleqiu/vue-drag-select

📘Demo

Storybook

Edit vue-drag-select-example

🧭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