Vue.js可选组件 - vue-selectable

Vue.js可选组件 - vue-selectable
插件名称 vue-selectable
发布时间 2020年6月23日

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

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

变更日志:

v0.5.0(06/21/2020)

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

安装和下载:

$ npm install vue-selectable  --save

用法

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

Vue 1.x(ES6语法)

注意:对于Vue 2.x,您需要编写v-forv-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个功能, selectedGetterselectedSetter,和selectingSetter,以获得/组阵列“选择”(选择状态-阵列布尔)布尔的,“选择”(选择拖动期间的项目的选择状态数组,数组;必须用于显示实时选择的视觉反馈)。

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

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

您也可以在selectable下面的JS 组件对象中指定其他参数。例如,您可以设置rootElement除“文档”以外的其他元素(以将事件侦听器附加到该元素)。也可以先设置rootElementnull,然后在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)。

内部选项

除了已经描述过的selectedGetterselectedSetter和和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)