更新记录

1.0.0（2024-12-07） 下载此版本

• 首次发布
• 支持基础搜索功能
• 支持自定义搜索按钮样式
• 支持左侧图标自定义
• 支持清除按钮
• 支持多端兼容
• 提供丰富的事件回调
• 支持样式完全自定义

平台兼容性

uni-app

其他

wht-search 轻量级搜索框组件

一个优雅、轻量、可定制的搜索框组件，支持多端兼容。

扫码体验

扫描上方二维码，搜索指定插件，即可体验组件的完整功能！

平台兼容性

• App-vue: 支持
• App-nvue: 支持
• H5: 支持
• 微信小程序: 支持
• 支付宝小程序: 支持
• QQ小程序: 支持

安装方式

插件依赖

本组件依赖 uni-icons 图标组件，请确保项目中已安装该组件：

1. 在插件市场打开uni-icons，点击安装
2. 或者在HBuilderX中点击菜单【工具】->【插件安装】，搜索 uni-icons 安装

组件安装

通过uni_modules安装，在插件市场打开，点击安装即可。

基础用法

<template>
    <wht-search v-model="searchText" @search="onSearch" />
</template>
<script>
export default {
    data() {
        return {
            searchText: ''
        }
    },
    methods: {
        onSearch(value) {
            console.log('搜索:', value)
        }
    }
}
</script>

API

Props 属性

Events 事件

Slots 插槽

样式定制

组件提供了丰富的样式定制属性：

<template>
  <wht-search
    v-model="searchText"
    :content-style="{ 
      background: '#f0f2f5',
      borderRadius: '100rpx'
    }"
    :search-btn-style="{
      background: '#2979ff',
      borderRadius: '100rpx'
    }"
  />
</template>

更多使用示例请参考demo。