Vue 仿qq邮箱收件人组件,纯键盘操作快捷实现多项选择

jwolf

3974 0 0 2019-11-21 4:06

multi-items-input

You can select multiple items just with keyboard. Input some keywords and using ↓, ↑,tab or enter to select, delete to remove.

Examples

Project page

https://jwolfcn.github.io/vue-multi-items-input/

Installation

npm install --save multi-items-input

Usage

In your entry js, main.js mostly

import Vue from 'vue'
import 'multi-items-input'
import 'multi-items-input/dist/multi-items-input.css'

Then you can use the tag multi-items-input

<multi-items-input    
  :fetch="search"    
  placeholder="placeholder"    
  :height="100"    
  separator=";"    
  @select="select"    
  @delete="onDelete"    
  :selection-only="false"></multi-items-input>

For more details, refer to the example directory.

API

Properties

Property	Type	Default	Description
placeholder	String		Place holder of input.
separator	String		Separator between items.
height	Number	100	Height of the container.
fetch	Function(queryStr, done)		Triggered to request for suggestion. Keywords would passed as the first parameter. The second parameter is a callback function which notifys the request is completed.
trigger-on-focus	Boolean	true	Whether trigger the fetch function on focus.
selection-only	Boolean	false	Wether the user should select from the suggestion.

Events

event	Parameters	description
delete	Array, Object	The first parameter is the array of the selected items. Second is the item which deleted.
select	Object, Array	The first parameter is the item added. Second is the array of the selected items.