搜索 Search

搜索组件。

重要提示

重要提示

需在 App.vue 中引入 pure-styles 样式，@import '@/uni_modules/pure-styles/index.css';

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 v-model 绑定搜索内容。

<template>
    <pure-search v-model="searchText"></pure-search>
</template>

<script setup>
import { ref } from 'vue';

// 搜索内容
const searchText = ref('');
</script>

提示内容

• 通过 placeholder 设置提示内容，可以是字符串，也可以是字符串数组。
  • 字符串：当只有一个提示内容时，可以直接设置字符串。
  • 字符串数组：当有多个提示内容时，可以设置字符串数组，此时提示内容会上下滚动。

<template>
    <pure-search placeholder="请输入搜索内容"></pure-search>
    <pure-search :placeholder="['请输入搜索内容', '搜索一下，发现精彩']"></pure-search>
</template>

搜索按钮

• 通过 showBtn 属性设置是否显示搜索按钮。

<template>
    <pure-search placeholder="请输入搜索内容" showBtn></pure-search>
</template>

功能按钮

• 通过 #functions 插槽自定义功能按钮。

<template>
    <pure-search placeholder="请输入搜索内容" showBtn>
        <template #functions>
            <pure-icon name="__saoma"></pure-icon>
        </template>
    </pure-search>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
modelValue	搜索内容	[String, Number]	""	-	+1.0.0
placeholder	提示内容	[String, Array]	""	-	+1.0.0
placeholderClass	提示内容的自定义 class	String	""	-	+1.0.0
searchIcon	左侧搜索图标名称，同图标组件（Icon）的 name 属性，参考	String	__sousuo_2	-	+1.0.0
focusClass	聚焦时的自定义 class	String	""	-	+1.0.0
showBtn	是否显示搜索按钮	Boolean	false	true	+1.0.0
btnText	搜索按钮文本	String	搜索	-	+1.0.0
btnHoverClass	搜索按钮的 hover-class	String	pure-hover	-	+1.0.0
<input /> 组件原生属性	参考	-	-	-	+1.0.0

Event

事件名	说明	回调参数	版本
input	输入事件， 参考	event	+1.0.0
focus	聚焦事件， 参考	event	+1.0.0
blur	失焦事件， 参考	event	+1.0.0
keyboardHeightChange	键盘高度变化事件， 参考	event	+1.0.0
search	搜索事件	searchWord: 搜索内容	+1.0.0

Slots

名称	说明	参数	版本
functions	功能按钮区	-	+1.0.0
right	最右侧区域	-	+1.0.0