Vue.js应用程序中创建鼠标选择对象的指令。

鼠标选择页面上的某些对象是常见的任务。该指令使此任务变得非常容易，实现对象选择所需要做的只是几行代码。它是在jQuery Selectable交互之后设计的，并借鉴了一些详细信息angular-multiple-selection。现在，它支持普通鼠标选择，并支持Ctrl在选择过程中按下键添加到先前选择的值。

变更日志：

v0.5.0（06/21/2020）

• 解决了可选区域内容重叠的问题

安装和下载：

$ npm install vue-selectable  --save

用法

要正常使用指令，您将需要两个数组，一个数组用于选定的项目-每个可选项目都具有布尔值，另一个数组用于选择框下的项目。默认情况下，按selectable类标识的元素 将被视为可选项目。您肯定需要的另一件事是将成为选择框的元素。指令会改变height，width，top，和left该元素的属性，以及肘节通过改变其可见度display从属性block到none，反之亦然。

Vue 1.x（ES6语法）

注意：对于Vue 2.x，您需要编写v-for为v-for="(item, i) in items"

<div v-selectable="{ 
         selectedGetter: selectedGetter, 
         selectedSetter: selectedSetter, 
         selectingSetter: selectingSetter
         }" id="app">
        <div class="selection"></div>
        <div v-for="(i, item) in items"
             :class="{ selected: !!selected[i], selecting: !!selecting[i] }"
         	 class="selectable" >{{ item }}</div>
</div>

import selectable from 'vue-selectable';

new Vue({
	el: '#app',
    data: {
        selected: [],
        selecting: [],
        items: ['abc', 'bcd', 'cde']
    },
    directives: { selectable },
    methods: {
        selectedGetter() { return this.selected; },
        selectedSetter(v) { this.selected = v; },
        selectingSetter(v) { this.selecting = v; }
    }
});

指令中的选择项列表可以通过调用进行更新setSelectableItems(el, itemSelector)，el其中指令中的元素是where。可选参数itemSelector可用于更改可选项目选择器。函数返回添加的可选项目数，如果出错则返回-1。

选 项

v-selectable需要一个强制性的参数-指令参数-对象，具有3个功能， selectedGetter，selectedSetter，和selectingSetter，以获得/组阵列“选择”（选择状态-阵列布尔）布尔的，“选择”（选择拖动期间的项目的选择状态数组，数组；必须用于显示实时选择的视觉反馈）。

selectedSetter函数还接收“选择”数组作为第二个参数。当我们需要一些自定义选择逻辑时，这可能会有所帮助。

如果您有5个可选项目，则selected数组将有5个元素最初设置为false。当用户选择某些项目时，值将true相应更改为。这同样适用于selecting阵列。

您也可以在selectable下面的JS 组件对象中指定其他参数。例如，您可以设置rootElement除“文档”以外的其他元素（以将事件侦听器附加到该元素）。也可以先设置rootElement为null，然后在DOM树中出现必要的元素时进行设置。事件侦听器将在紧随其后附加（但该技巧只会起作用一次）。或者，您可以将renderSelecting/renderSelection选项设置为true，以使用指令管理CSS类而不是Vue.js框架。

其他可用参数：

• data-items-CSS选择器，用于标识可选项目，默认情况下将其设置为.selectable （具有CSS类“ selectable”的元素）
• data-box-选择框元素。默认情况下，它尝试将元素与selectionCSS类一起使用
• data-constraint -限制选择区域的框（选择框只能在限于此元素的内部区域内），默认情况下，选择区域仅限于带有指令的元素

导出的util函数

使用指令导出了两个实用程序功能，以帮助配置指令。两者都需要带有指令的DOM节点作为第一个参数（“ el”）。

• setSelectableItems(el, [itemSelector])-如果不带第二个参数使用，则重新读取DOM以获取可选项（例如，在加载AJAX项之后有用）。可以指定另一个CSS选择器来创建新的可选项目列表。
• setOptions(el, options)-即时设置指令选项。现在需要设置 scrollingFrameVue.js v2的内部参数（请参阅参考资料examples-vue2/example3.html）。

内部选项

除了已经描述过的selectedGetter，selectedSetter和和selectingSetter指令具有以下内部选项外，可以使用指令声明（作为getter / setter方法）或即时设置这些选项：

• disableTextSelection （布尔值）-在选择框处于活动状态时禁用浏览器文本选择（默认情况下处于启用状态）
• scrollingFrame （DOM节点）-具有滚动条的元素，其中包含可选项目的列表
• scrollSpeed （int）-滚动速度（以每16ms像素为单位，默认为10px）
• scrollDistance （int）-滚动开始起作用时与边框的距离（以px为单位，默认为10px）
• scrollDocumentEnabled （布尔值）-在选择项目时启用（默认）/禁用文档滚动，在配置scrollingFrame时忽略
• renderSelected （布尔值）-将CSS selectedClass添加到当前选定的元素中（不带框架）
• renderSelecting （布尔值）-将CSS selectedClass添加到当前在选择框下方的元素（不带框架）
• selectingClass （字符串）-CSS类，用于标记选择框下的项目（默认情况下为“ .selecting”）
• selectedClass （字符串）-用于标记所选项目的CSS类（默认情况下为“ .selected”）
• overrideAddMode （布尔值）-选择框始终在此标志为true时将项目添加到选择中，尽管按下了“ Ctrl”或“ Meta”键（默认为false）