Search

Search

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

search - 图1

二维码

search - 图2

Install

安装

局部注册

全局注册

  1. import { Search } from 'vux'
  2. export default {
  3. components: {
  4. Search
  5. }
  6. }

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

API

属性

名字类型默认值说明版本要求
placeholderstring搜索(search)提示文字
cancel-textstring取消(cancel)取消文字
valuestring表单值,v-model绑定
resultsarray指定搜索结果, 为带有 title key 的对象组成的数组,如 [{title: 'hello', otherData: otherValue}], auto-fixed 为 false 时不会显示结果
auto-fixedbooleantrue是否自动固定在顶端
topstring0px自动固定时距离顶部的距离
positionstringfixed自动固定时的定位,一些布局下可能需要使用其他定位,比如absolute
auto-scroll-to-topbooleanfalseSafari下弹出键盘时可能会出现看不到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输入框左侧 slotv2.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

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 43,贡献人数 4
airylandLinHaobinFisher光君

Changelog

发布日志

  • v2.9.0 [feature] 添加事件 on-clear #2251
  • 2.7.6 [fix] 修复 在 cancel 或 clear 时没有触发 on-change 和 input 事件
  • v2.7.3 [fix] 修复输入法导致 on-change 事件提前触发
  • v2.6.3 [feature] 添加事件 on-blur
  • v2.3.6 [feature] 添加方法 setBlur
  • v2.3.5 [feature] 增加 slot:left
  • v2.2.2 [enhance] 在 iOS 键盘上显示 search
  • v2.2.0 [enhance] 在 input 后触发 on-change 事件(否则此时 v-model 绑定的值和参数不一致)
  • v2.1.1-rc.13 [feature] 添加 slot=right
  • v2.1.1-rc.12 [enhance] 点击取消按钮后不再触发 on-change 事件
  • v2.1.1-rc.10 [feature] 支持 on-focus 事件
  • v2.1.0 [feature] 更新到WeUI最新代码
  • v2.1.0 [enhance] 当value为空时,不显示清除按钮
  • v2.1.0-rc.47 [enhance] 删除无用代码
  • v2.1.0-rc.47 [fix] 修复取消按钮在非fixed情况下没有出现的问题 @excitedcat
  • v2.1.0-rc.47 [fix] 修复页面上多个实例时,label id冲突