WeUI Uniapp Design

Appearance

Searchbar 搜索栏 ​

搜索栏组件，用于输入搜索关键词。支持聚焦/失焦状态切换、清除输入、取消搜索、键盘确认搜索及自定义搜索按钮。

基础用法 ​

通过 v-model 绑定搜索关键词，placeholder 设置占位提示。点击搜索栏进入聚焦状态并展示输入框与取消按钮。

当前值：

查看代码
vue
<template>
  <weui-searchbar v-model="value" placeholder="搜索" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

事件回调 ​

通过 focus、blur、cancel、clear、search、confirm 事件监听用户操作。点击搜索栏进入聚焦状态，输入内容后点击清除或取消按钮查看对应事件。

点击搜索栏并输入文字以触发事件

查看代码
vue
<template>
  <weui-searchbar
    v-model="value"
    placeholder="搜索"
    @focus="onFocus"
    @blur="onBlur"
    @cancel="onCancel"
    @clear="onClear"
    @search="onSearch"
    @confirm="onConfirm"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const eventLog = ref<string[]>([])
const logEvent = (msg: string) => {
  const time = new Date().toLocaleTimeString()
  eventLog.value.unshift(`[${time}] ${msg}`)
  if (eventLog.value.length > 5) eventLog.value.pop()
}
const onCancel = () => logEvent('触发 cancel 事件')
const onClear = () => logEvent('触发 clear 事件')
const onSearch = (val: string) => logEvent(`触发 search 事件，值：${val}`)
const onConfirm = () => logEvent('触发 confirm 事件')
const onFocus = () => logEvent('触发 focus 事件')
const onBlur = () => logEvent('触发 blur 事件')
</script>

自定义取消按钮 ​

cancelText 自定义取消按钮文字，点击取消按钮时触发 cancel 事件并退出聚焦状态。

当前值：

查看代码
vue
<template>
  <weui-searchbar v-model="value" cancel-text="返回" @cancel="onCancel" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const onCancel = () => console.log('用户取消了搜索')
</script>

官方视觉模式 ​

mode 对应 WeUI 的官方搜索栏结构：默认 filled 适合普通页面；filled-grey 用于灰色背景页面；outlined 用于带明确搜索操作的场景；homepage 为首页展示型搜索入口。

查看代码
vue
<template>
  <!-- 灰色背景中的填充搜索栏，可显示固定前缀 -->
  <weui-searchbar
    v-model="keyword"
    mode="filled-grey"
    words="微信"
    placeholder="搜索联系人"
  />

  <!-- 首页只展示搜索入口和拍照按钮，不承载输入 -->
  <weui-searchbar mode="homepage" homepage-text="搜索" @camera="openCamera" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const keyword = ref('')
const openCamera = () => console.log('打开拍照能力')
</script>

搜索按钮 ​

mode="outlined" 配合 searchButtonText 使用官方 weui-search-bar_outlined、weui-search-bar__search-btn 与主按钮结构。点击搜索按钮或键盘确认会触发 search 事件，携带当前输入值。

搜索

当前值：

查看代码
vue
<template>
  <weui-searchbar
    v-model="value"
    mode="outlined"
    search-button-text="搜索"
    @search="onSearch"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const onSearch = (val: string) => {
  console.log('搜索：', val)
}
</script>

键盘确认搜索 ​

输入框设置了 confirm-type="search"，用户点击键盘上的搜索键时会触发 confirm 事件，并同时触发 search 事件携带当前值。

vue
<template>
  <weui-searchbar v-model="value" @confirm="onConfirm" @search="onSearch" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const onConfirm = () => console.log('键盘确认')
const onSearch = (val: string) => console.log('搜索：', val)
</script>

自动聚焦 ​

focus 让搜索栏在渲染时自动获取焦点，直接进入输入状态。

vue
<template>
  <weui-searchbar v-model="value" focus placeholder="自动聚焦" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

扩展类名 ​

通过 extClass 追加自定义类名到根元素，用于定制样式。

vue
<template>
  <weui-searchbar v-model="value" ext-class="my-searchbar" />
</template>

Attributes ​

参数说明类型默认值
modelValuev-model 绑定值string''
placeholder占位提示文字string'搜索'
cancelText取消按钮文字string'取消'
focus是否自动聚焦booleanfalse
searchButtonText搜索按钮文字，不设置则只显示取消按钮string—
mode官方视觉模式：filled / filled-grey / outlined / homepagestring'filled'
words搜索词前缀，适用于 filled / filled-greystring—
showBackButton是否显示返回按钮booleanfalse
homepageText首页搜索栏展示文字，仅 homepage 模式使用string—
showCamera首页搜索栏是否显示拍照入口，仅 homepage 模式使用booleantrue
extClass根元素扩展类名string—

Events ​

事件名说明回调参数
update:modelValue输入值变化时触发(value: string)
focus输入框获得焦点时触发(event)
blur输入框失去焦点时触发(event)
confirm用户点击键盘搜索键时触发(event)
cancel点击取消按钮时触发—
clear点击清除按钮时触发—
search点击搜索按钮或键盘确认时触发(value: string)
back点击返回按钮时触发—
camera点击首页搜索栏的拍照入口时触发—