vue下拉组件_Vue Dual Listbox MultiSelect下拉组件

vue下拉组件

vue-listbox-multiselect (vue-listbox-multiselect)

Vue Dual list-box multi-select drop-down component for enterprise applications.

Vue用于企业应用程序的双列表框多选下拉组件。

动机 (Motivation)

There are several good multi-select components available for Vue. However, none are suitable for enterprise app development. In a typical enterprise app, you are often challenged offering a simple drop-down which allows the user to filter through thousands of categorized items from the server, and allows the user to select hundreds. At Banner Edge Media, we have been using a similar component for multiple years. As we migrate to Vue, we wanted to share this component with the Vue community, and together make it even better.

Vue有几个不错的多选组件。 但是，没有一种适合企业应用程序开发。 在典型的企业应用程序中，您经常面临提供一个简单下拉菜单的挑战，该下拉菜单允许用户从服务器中筛选成千上万个分类项目，并允许用户选择数百个。 在Banner边缘媒体，我们多年来一直使用类似的组件。 迁移到Vue时，我们希望与Vue社区共享此组件，并一起使其变得更好。

建立 (Setup)

Install:

安装：

# NPM
npm install @banneredge/vue-listbox-multiselect

Usage:

用法：

<script lang="ts">
import Vue from 'vue';
import VueListboxMultiselect from '@banneredge/vue-listbox-multiselect';
import dataSet from './usCities';

export default Vue.extend({
  name: 'ServeDev',
  components: {
    VueListboxMultiselect
  },
  data() {
    return {
      selectedList: [] as any[],
    };
  },
  methods: {
    async search(query: string): Promise<any[]> {
      const ids = this.selectedList.map((x) => x.id);
      let subset = dataSet.filter((x) => !ids.includes(`${x.state}-${x.city}`));

      if (!query) {
        subset = subset.slice(0, 100);
      } else {
        const q = query.toLowerCase();
        subset = subset.filter((x) => x.city.toLowerCase().includes(q) || x.state.toLowerCase().includes(q));
        subset = subset.slice(0, 100);
      }

      return subset.map((x: any) => {
        return {
          id: `${x.state}-${x.city}`,
          value: x.city,
          group: x.state
        }
      });
    },
  },
});
</script>

<template>
  <v-app id="app">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <vue-listbox-multiselect
        v-model="selectedList"
        :search-function="search"
        placeholder="Search Items"
        style="width: 300px; margin: 20px auto"
        size="medium"
        :hide-search="false"
    />
  </v-app>
</template>

笔记： (Notes:)

• The current version is heavily dependent on Vuetify with mdi icons for the arrows

  当前版本严重依赖Vuetify，带有箭头的MDI图标

• There is no direct way to pass in the items, everything must go through the async search function. The function will get called with a blank query on load.

  没有直接传递项目的方法，所有内容都必须通过异步搜索功能进行。 加载时将使用空白查询来调用该函数。

• You must implement your own limit, filtering and excluding selected items (See examples). This is set up because we assume most use-cases will be calling the server for data and that will need to be handled on the server.

  您必须实现自己的限制，过滤并排除所选项目(请参见示例)。 进行此设置是因为我们假设大多数用例将在服务器上调用数据，并且需要在服务器上进行处理。

• There is lots of room for improvement, so please check out the Roadmap and contribute!

  还有很多改进的空间，因此请查看路线图并做出贡献！

• Current recommendation is to pull 100 results with each query. Users do not need to scroll through more, they can just search to get what they need.

  当前的建议是在每个查询中提取100个结果。 用户不需要滚动更多内容，他们只需搜索即可获得所需内容。

道具 (Props)

Prop	Description
v-model	Model to bind output to. You can set it initially to pre-select items. Note: you will need to exclude selected items from each query. Type: {id: string, value: string, group?: string}. The component will NOT watch for changes on the model and re-fresh the list.
:search-function	Function that will get called when the component needs data. It should be async or return a Promise. A string query will be passed in as the only parameter. While the promise is not fulfilled, a loading indicator will show.
placeholder	Text to show in the select field when no items are selected. Defaults to 'None'
size	How wide to expand the menu. Options are, null, medium, large, x-large. They will fall back on a size that fits. Default size is 366px wide, it will look good in most modern mobile devices.
hide-search	Hides the search bar. Search is on by default. If you have a small list and still want to use this component, you have the option to turn it off. You can also turn it off dynamically if items < 10 for example.

Struts	描述
模型	绑定输出的模型。 您可以将其初始设置为预选项目。 注意：您需要从每个查询中排除选定的项目。 类型：{id：字符串，值：字符串，组？：字符串}。 该组件将不会监视模型上的更改并重新刷新列表。
：搜索功能	当组件需要数据时将调用的函数。 它应该是异步的或返回一个Promise。 字符串查询将作为唯一参数传递。 当未实现承诺时，将显示加载指示器。
占位符	没有选择任何项目时在选择字段中显示的文本。 默认为“无”
尺寸	展开菜单的宽度。 选项为null，medium，large，x-large。 它们将退回到合适的尺寸。 默认大小为366像素宽，在大多数现代移动设备中看起来都不错。
隐藏搜索	隐藏搜索栏。 默认情况下，搜索处于打开状态。 如果列表较小，但仍要使用此组件，则可以选择将其关闭。 例如，如果项目<10，您也可以动态关闭它。

路线图： (Roadmap:)

• Add demo and documentation static site.

  添加演示和文档静态站点。

• Clean up the code a bit and add comments.

  稍微整理一下代码并添加注释。

• Add interfaces for parameters

  添加参数接口

  • We should add a few more features before making contracts
    签订合同之前，我们应该添加一些其他功能

• Speed it up

  加快速度

  • It gets a little slow when you have 1000 items, and you have to group and sort them
    当您有1000个项目时，它会变得有点慢，并且您必须对它们进行分组和排序
  • Keeping the limit to 100 makes it work well.
    限制为100会使它正常工作。

• Test browser compatibility.

  测试浏览器兼容性。

  • Seems to work well in Chrome, Firefox, Edge
    似乎可以在Chrome，Firefox，Edge中正常运行
  • We should establish what we support.
    我们应该建立我们所支持的。

• Remove Vuetify dependency

  删除Vuetify依赖

  • Vuetify provides some very cool pre-made components, but we want this to be usable with any library.
    Vuetify提供了一些非常酷的预制组件，但是我们希望它可以在任何库中使用。

• Figure out a smart way to do widths.

  找出做宽度的聪明方法。

  • Sometimes if we have a large monitor and long item names, we want to stretch it very wide. If the item names are not long it does not look good.
  • 有时，如果我们有一个大型监视器和较长的项目名称，则我们希望将其扩展得很宽。 如果项目名称不长，则看起来不太好。

• Add a prop to Hide Search (May want to keep it for all use-cases?)

  在“隐藏搜索”中添加一个道具(可能要在所有用例中保留它吗？)

  • Sometimes we want to use this with a very small list and don't need the search box.有时我们希望将其与很小的列表一起使用，而不需要搜索框。

• Add test coverage?

  增加测试范围？

• Add a way to reset it to original state dynamically

  添加一种将其动态重置为原始状态的方法

  • Reset selected list
    重置所选列表
  • Re-run blank query
    重新运行空白查询
  • Through Emitter?
    通过发射器？

• Add slots to make it fully customizable

  添加插槽以使其完全可定制

• Add more input interactions

  添加更多输入互动

  • • Click (Select)
      单击(选择)
    • Ctrl-Click (Select Multiple)
      按住Ctrl键单击(选择多个)
    • Double-Click (Move Item)
      双击(移动项目)
  • • Shift-Click
      Shift-点击
    • Ctrl-A ?
      Ctrl-A吗？
    • Move with arrow keys?
      用箭头键移动？
    • Shift-arrow keys?
      Shift键？

翻译自: https://vuejsexamples.com/vue-dual-listbox-multiselect-dropdown-component/

vue下拉组件