# 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

提示

SearchInput 组件的二次封装,部分参数设置同 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

# 左侧文本

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

<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

# 右侧文本

通过 actionTextactionStyle 设置搜索框左侧文本及其样式。 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 (当前输入的值)
Last updated: 2022/4/25 下午3:40:34
10:44