Vue多项选择管理组件– Multiclick

Vue多项选择管理组件– Multiclick
插件名称 Multiclick
发布时间 2020年5月20日
插件作者 syropian

Multiclick是用于管理列表项选择状态的无呈现Vue组件。

安装和下载:

# NPM
$ npm install vue-multiclick --save

使用

导入并注册组件。

import VueMulticlick from 'vue-multiclick'

export default {
  ...
  components: {
    VueMulticlick
  }
}

在模板中,将单个元素包装在VueMulticlick组件中。您必须将对象数组items以及uid prop 传递给prop,这是项目对象中使它们唯一的关键。

<div>
  <VueMulticlick :items="items" uid="id">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </VueMulticlick>
</div>

设置选择状态

设置项目选择状态的最简单方法是通过itemClicked方法。此方法将自动拾取所有必要的事件修饰符(例如,按下meta/ ctrlshift键),并适当设置选择项。

<div>
  <VueMulticlick :items="items" uid="id" v-slot="{ itemClicked }">
    <ul>
      <li v-for="item in items" :key="item.id" @click="itemClicked">{{ item.name }}</li>
    </ul>
  </VueMulticlick>
</div>

检索选择状态

当然,仅设置选择状态通常是不够的,您将需要在视觉上更改当前选择的元素。您可以使用该itemIsSelected功能检查当前是否选择了给定项目。

<div>
  <VueMulticlick :items="items" uid="id" v-slot="{ itemClicked, itemIsSelected }">
    <ul>
      <li v-for="item in items" :key="item.id" :class="{ 'is-selected': itemIsSelected(item) }" @click="itemClicked">
        {{ item.name }}
      </li>
    </ul>
  </VueMulticlick>
</div>
<style>
  .is-selected {
    background-color: blue;
    color: #fff;
  }
</style>

属性

名称 描述 返回类型
selectedItems 返回所有当前选择的项目。 Array
selectedIndexes 返回所有选定项的索引 Array
lastSelectedItem 返回最后选择的项目。 Object
lastSelectedIndex 返回上一个选定项目的索引。 Number

方法

名称 描述 参数 返回值
itemClicked 根据事件修饰符(如果存在)设置选择状态。 item: Object
event: Object
null
setSelectedItem 将当前选择设置为单个项目。 item: Object null
setSelectedItems 将当前选择设置为传入的项目。 items: Array null
appendToSelection 将项目推送到选择列表 item: Object null
removeFromSelection 从选择列表中删除一个项目。 item: Object null
getItemIndex 返回给定项目的索引 item: Object Number
itemIsSelected 返回当前是否选择给定项目。 item: Object Boolean
selectAll 将所有项目推送到选择列表。 N/A null
selectNone 从选择列表中删除所有项目。 N/A null
getItemsFromRange 检索给定范围内的所有项目。 start: Number
end: Number
Array
setSelectedItemsFromLastSelected 将所选项目设置为基于上一个所选项目的范围 item: Object null