Search 组件使用教程
优质
小牛编辑
146浏览
2023-12-01
安装
import { Search } from 'vux'
export default {
components: {
Search
}
}// 在入口文件全局引入
import Vue from 'vue'
import { Search } from 'vux'
Vue.component('search', Search)
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| 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 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @search-cancel-font-color | #09BB07 | 取消按钮文本颜色 | |
| @search-bg-color | #EFEFF4 | 背景颜色 | |
| @search-placeholder-font-color | #9B9B9B | placeholder文本颜色 |