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

    jwolf 
909  0  0   2019-11-21 4:06


multi-items-input

npm npm vue2

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

header

Table of contents

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

PropertyTypeDefaultDescription
placeholderString
Place holder of input.
separatorString
Separator between items.
heightNumber100Height of the container.
fetchFunction(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-focusBooleantrueWhether trigger the fetch function on focus.
selection-onlyBooleanfalseWether the user should select from the suggestion.

Events

eventParametersdescription
deleteArray, ObjectThe first parameter is the array of the selected items. Second is the item which deleted.
selectObject, ArrayThe first parameter is the item added. Second is the array of the selected items.

License

MIT © Jwolf



标签