1. bbg-vue-search

bbg-vue-search

usage

Installation

 npm install mk-vue-search  

Options

 {
	autoFocus:true,
	searchInput:'', // input's value
  isShow:false, //whether show search for the first time.
	showAlways:false, //show always.
  url:'', //search url,
  emptyMsg: '', // message for empty data.
  title: '', // placeholder value
  delay: 500, //delay time
  ajaxData: {}, //ajax param
  showClose: false, //show or hide 'close' button
	appendToElement:'', // Where the module is inserted
  listConfig:{
    name:'text' // map 'name' to 'text'
  },
}  

Demo

html

 <mk-search ref="search" @select="onSelect" :options="{url:'https://www.google.cn'}">
      <ul slot="list">
        <li>11</li>
      </ul>
</mk-search>  

js

 import Search from 'mk-vue-search' 
Vue.use(Search) 

Interface data

url

 @param key //search word
@return 
{
	list:
		[{
			"text": "东文",
			...param
		}]  
}

Events

Event Name Description Parameters
select trigger select {list:{...param, "text": "东文"}, searchInput:'search word'}
show trigger show {searchInput:'search word'}
close trigger close {searchInput:'search word'}
enter trigger enter {searchInput:'search word'}

Methods

Method Description Parameters
show show search ''
searchData invoke search interface {key:'search word'}
setFocus set input focus ''

Slot

Name Description
list show default content when search's input is empty.

Contributor

licuiting