mk-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