Search 搜索框
使用指南
import { Search } from 'fs-ui'
export default {
components: {
fsSearch: Search
}
}
1
2
3
4
5
6
7
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
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
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 |