Search

demo 原始链接demo 源码编辑文档组件源码

search - 图1

二维码

search - 图2

Install

安装

局部注册

全局注册

import { Search } from 'vux'
export default {
  components: {
    Search
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { Search } from 'vux'
Vue.component('search', Search)

API

名字	类型	默认值	说明	版本要求
placeholder	string	搜索(search)	提示文字	—
cancel-text	string	取消(cancel)	取消文字	—
value	string		表单值，`v-model`绑定	—
results	array		指定搜索结果, 为带有 title key 的对象组成的数组，如 [{title: 'hello', otherData: otherValue}], auto-fixed 为 false 时不会显示结果	—
auto-fixed	boolean	true	是否自动固定在顶端	—
top	string	0px	自动固定时距离顶部的距离	—
position	string	fixed	自动固定时的定位，一些布局下可能需要使用其他定位，比如`absolute`	—
auto-scroll-to-top	boolean	false	`Safari`下弹出键盘时可能会出现看不到input，需要手动滚动，启用该属性会在fix时滚动到顶端	—

名字	参数	说明	版本要求
@on-submit	`(value)`	表单提交时触发	—
@on-cancel	—	点击`取消`按钮时触发	—
@on-change	`(value)`	输入文字变化时触发	—
@on-result-click	`(item)`	点击结果条目时触发，原来的`result-click`事件不符合规范已经废弃	—
@on-focus	—	输入框获取到焦点时触发	v2.1.1-rc.10
@on-blur	—	输入框失去焦点时触发	v2.6.3
@on-clear	—	点击清除按钮时触发	v2.9.0

名字	说明	版本要求
默认插槽	搜索结果列表上面 slot，可以用来自定义搜索结果显示区域(results 设为空)	—
right	输入框右侧 slot	—
left	输入框左侧 slot	v2.3.5

名字	参数	说明	版本要求
setFocus		获取 input 焦点，在 Safari 上你必须在 click 事件回调里使用才能生效
setBlur		手动设置 input 失去焦点，一般用于在 on-submit 事件中实现隐藏手机键盘	v2.3.6

Variables

## 样式变量

名字	默认值	说明	继承自变量
@search-cancel-font-color	#09BB07	取消按钮文本颜色
@search-bg-color	#EFEFF4	背景颜色
@search-placeholder-font-color	#9B9B9B	placeholder文本颜色

Issues