# Search 搜索

用于搜索场景的输入框组件。

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

设置 v-model 绑定输入数据即可。

<template>
  <pi-search v-model="demo1" />
</template>

<script>
  export default {
  data() {
    return {
      demo1: ''
    }
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

提示

Search 是 Input 组件的二次封装，部分参数设置同 Input 。

# 自定义Icon

searchIcon 配合 searchIconStyle 可以替换图标和修改图标样式。

searchIconPosition 则可以控制图标的位置：left - 左边（默认）， right - 右边。

<pi-search v-model="demo2" />
<pi-search v-model="demo2" :search-icon-style="{ fontSize: '50rpx' }" />
<pi-search
  v-model="demo2"
  search-icon="camera"
  :search-icon-style="{ fontSize: '50rpx', color: 'blue' }"
/>
<pi-search
  v-model="demo2"
  search-icon="camera"
  search-icon-position="right"
  :search-icon-style="{ fontSize: '50rpx', color: 'blue' }"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 左侧文本

通过 searchLabel 和 searchLabelStyle 设置搜索框左侧文本及其样式。

<pi-search v-model="demo2" search-label="珠海" />
<pi-search
  v-model="demo2"
  search-label="珠海"
  :search-label-style="{ color: '#ff508a' }"
/>
<pi-search
  v-model="demo2"
  search-label="珠海"
  search-icon-position="right"
  :search-icon-style="{ fontSize: '50rpx', color: 'blue' }"
  :search-label-style="{ color: '#ff508a', fontSize: '36rpx' }"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 右侧文本

通过 actionText 和 actionStyle 设置搜索框左侧文本及其样式。 showAction 控制右侧文本的显隐。

<pi-search v-model="demo4" action-text="搜索" show-action />
<pi-search
  v-model="demo4"
  action-text="搜索"
  :action-style="{ color: 'blue' }"
  show-action
/>
<pi-search
  v-model="demo4"
  show-action
  search-label="珠海"
  action-text="搜索"
  search-icon-position="right"
  :search-icon-style="{ fontSize: '50rpx', color: 'blue' }"
  :action-style="{ color: 'blue', fontSize: '36rpx' }"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 设置搜索框背景颜色

background 设置搜索框背景颜色，color 设置输入框文本颜色。

<template>
  <pi-search
    v-model="demo7"
    search-label="PIUI"
    :search-label-style="{ color: '#ff508a' }"
    search-icon-color="#ffffff"
    show-action
    background="#e5e5e5"
    color="#ff508a"
    action-text="搜索"
    placeholder="提示文字"
    placeholder-style="color: #ffffff"
    @focus="handleClean"
  />
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      demo7: ''
    }
  },
  methods: {
    handleClean() {
      this.demo7 = ''
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# API

# Search Props

名称	描述	类型	必选	默认值
value	初始值	—	`false`	-
customStyle	自定义样式，对象形式	`Object`	`false`
customClass	自定义样式类，字符串形式	`String`	`false`
shape	搜索框形状, 可选值'square'-方形, 'round'-椭圆	`String`	`false`	'round'
background	背景颜色	`String`	`false`	'#f5f5f5'
clearable	是否启用清除控件	`Boolean`	`false`	true
clearIconStyle	清除图标自定义样式	`Object`	`false`
focus	是否自动获得焦点	`Boolean`	`false`	false
placeholder	占位提示文字	`String`	`false`	'请输入搜索关键词'
placeholderStyle	指定 placeholder 的样式	`String`	`false`	'color: #cccccc;'
maxlength	输入框最大能输入的长度，-1为不限制长度	`Number`/`String`	`false`	-1
showAction	是否在搜索框右侧显示文字	`Boolean`	`false`	false
actionText	右侧显示文字	`String`	`false`	'取消'
actionStyle	指定右侧显示文字样式	`Object`	`false`
inputAlign	输入框内容对齐方式: 'left'-左对齐、'center'-居中对齐、'right'-右对齐	`String`	`false`	'left'
searchLabel	搜索框左侧文本	`String`	`false`
searchLabelStyle	搜索框左侧文本样式	`Object`	`false`
showSearchIcon	是否显示搜索icon	`Boolean`	`false`	true
searchIcon	输入框的图标，可以为icon名称或图片路径	`String`	`false`	'search'
searchIconColor	输入框左边的图标颜色(当传入searchIcon为pi-icon的时候)	`String`	`false`	'#333333'
searchIconStyle	输入框左侧的图标自定义样式	`Object`	`false`
searchIconPosition	搜索icon的位置, 可选值为'left', 'right'	`String`	`false`	'left'
disabled	是否禁用输入框	`Boolean`	`false`	false
inputStyle	指定input样式	`Object`	`false`
height	导航栏高度，单位默认rpx	`String`/`Number`	`false`	58
color	输入文本颜色	`String`	`false`	'#333333'

# Search Events

事件名	描述	参数
blur	输入框失去焦点时触发	event: Event
search	键盘点击搜索时触发	value: string (当前输入的值)
focus	输入框获得焦点时触发	event: Event
clear	延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)	event: Event
action	点击按钮时触发	value: string (当前输入的值)

← CircleProgress 环形进度条 Rate 评分 →