Search 搜索框

使用指南

import { Search } from 'fs-ui'

export default {
  components: {
    fsSearch: Search
  }
}
1
2
3
4
5
6
7

代码演示

  • 基础
<fs-search v-model="val1" clearable></fs-search>
1
  • 自定义提示
<fs-group title="自定义提示">
  <fs-search v-model="val2" placeholder="自定义提示"></fs-search>
</fs-group>
1
2
3
  • 显示取消按钮
<fs-search v-model="val3" show-ccancel></fs-search>
1
  • 显示搜索按钮
<fs-search v-model="val4" clearable show-search @search="handleClick3"></fs-search>
1
  • 禁用
<fs-search v-model="val5" disabled></fs-search>
1
  • 自定义操作按钮
<fs-search v-model="val6">
  <span @click="handleClick4" slot="action">查找</span>
</fs-search>
1
2
3

属性

参数 说明 类型 默认值
v-model 绑定的值 String, Number -
clearable 显示清除按钮 Boolen -
disabled 原生属性 Boolen -
placeholder 原生属性 String '搜索'
show-cancel 显示取消按钮,触发cancel事件,会清空输入值 Boolen -
show-search 显示搜索按钮,触发search事件 Boolen -

事件

event 说明 返回值
input input 事件 value
keypress keypress 事件, enter 健触发 event
cancel cancel 事件 -
search search 事件 value