当前位置: 首页 > 文档资料 > VUX 中文文档 >

Search 组件使用教程

优质
小牛编辑
141浏览
2023-12-01

安装

import { Search } from 'vux'

export default {
  components: {
    Search
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { Search } from 'vux'

Vue.component('search', Search)

属性

名字类型默认值说明版本要求
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

样式变量

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