Search 搜索框

优质

小牛编辑

139浏览

2023-12-01

import { Search } from 'feui';
components: {
  [Search.name]: Search
}

代码演示

浮动到顶端用法

<fe-search
  @result-click="resultClick"
  @on-change="getResult"
  :results="results"
  v-model="value"
  position="absolute"
  auto-scroll-to-top top="46px"
  @on-focus="onFocus"
  @on-cancel="onCancel"
  @on-submit="onSubmit"
  ref="search"></fe-search>

固定定位

<fe-search 
  @on-submit="onSubmit" 
  :auto-fixed="false" 
  v-model="value2" 
  @on-focus="onFocus" 
  @on-cancel="onCancel"></fe-search>

API

参数	说明	类型	默认值	可选值
value	表单值，使用`v-model`	`String`	-	-
placeholder	搜索框提示文字	`String`	搜索	-
cancel-text	取消文字	`String`	取消	-
autoFixed	书否固定定位到顶部	`Boolean`	`true`	`true`,`false`
results	指定搜索结果,key有名为`title`的对象组成的数组	`Array`	-	如 [{title: ‘搜索结果’, xxx: xxxx}]
top	自动固定时距离顶部的距离	`String`	`0px`	-
position	自动固定时的定位，一些布局下可能需要使用其他定位	`String`	`fixed`	`absolute`
auto-scroll-to-top	Safari下弹出键盘时可能会出现看不到input，需要手动滚动，启用该属性会在fix时滚动到顶端	`Boolean`	`false`	`true`,`false`

Slots

Slot名	说明	备注
default	搜索结果列表上面 slot，可以用来自定义搜索结果显示区域(results 设为空)	-
right	输入框右侧 slot	-
left	输入框左侧 slot	-

Events

事件名	参数	说明	备注
on-submit	-	表单提交时触发	-
on-cancel	-	点击取消按钮时触发	-
on-change	`value`	输入文字变化时触发	-
on-result-click	`item`	点击结果条目时触发	-
on-focus	-	输入框获取到焦点时触发	-
on-blur	-	输入框失去焦点时触发	-

Methods

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