插件名称 | 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
类标识的元素 将被视为可选项目。您肯定需要的另一件事是将成为选择框的元素。指令会改变height
,width
,top
,和left
该元素的属性,以及肘节通过改变其可见度display
从属性block
到none
,反之亦然。
注意:对于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
-选择框元素。默认情况下,它尝试将元素与selection
CSS类一起使用data-constraint
-限制选择区域的框(选择框只能在限于此元素的内部区域内),默认情况下,选择区域仅限于带有指令的元素使用指令导出了两个实用程序功能,以帮助配置指令。两者都需要带有指令的DOM节点作为第一个参数(“ el”)。
setSelectableItems(el, [itemSelector])
-如果不带第二个参数使用,则重新读取DOM以获取可选项(例如,在加载AJAX项之后有用)。可以指定另一个CSS选择器来创建新的可选项目列表。setOptions(el, options)
-即时设置指令选项。现在需要设置 scrollingFrame
Vue.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)