更新记录

0.1.1（2025-08-31） 下载此版本

• chore: 更新文档

0.1.0（2025-04-22） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.0.9（2025-04-12） 下载此版本

• feat: 容器由flex:1改为width:100%

平台兼容性

uni-app(4.73)

uni-app x(4.75)

其他

lime-search 搜索

一个功能丰富的搜索组件，用于用户输入搜索信息，并进行页面内容搜索。组件支持v-model双向数据绑定，提供多种自定义样式选项，包括不同形状、颜色和大小的搜索框，支持多种事件监听和插槽自定义，兼容uniapp/uniappx。

插件依赖：lime-style、lime-shared、lime-icon、lime-svg

文档链接

📚 组件详细文档请访问以下站点：

• 搜索文档 - 站点1
• 搜索文档 - 站点2
• 搜索文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-search
2. 插件市场导入即可，首次导入可能需要重新编译
3. 在页面中使用l-search组件（组件）或lime-search（演示）

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础使用

v-model 用于控制搜索框中的文字。

<l-search class="search" v-model="value" placeholder="请输入关键字" />

const value = ref('')

事件监听

Search 组件提供了多种事件监听，包括 change、blur、clear、focus、submit、action-click，通过action属性设置右侧操作按钮文字。

<l-search
    v-model="value"
    placeholder="请输入关键字"
    action="取消"
    @change="onChange"
    @blur="onBlur"
    @clear="onClear"
    @focus="onFocus"
    @submit="onSubmit"
    @action-click="onActionClick">
</l-search>

const value = ref('');
const onChange = (value: string) => {
    console.log(`onChange`, value)
}
const onBlur = (value: string) => {
    console.log(`onBlur`, value)
}
const onClear = (value: string) => {
    console.log(`onClear`, value)
}
const onFocus = (value: string) => {
    console.log(`onFocus`, value)
}
const onSubmit = (value: string) => {
    console.log(`onSubmit`, value)
}
const onActionClick = () => {
    console.log('click')
}

内容居中

通过 center 属性设置搜索框内容的居中显示。

<l-search class="search" v-model="value" :center="true" placeholder="请输入关键字" />

禁用

通过 disabled 属性设置搜索框为禁用状态。

<l-search class="search" v-model="value" :disabled="true" placeholder="请输入关键字" />

形状

通过 shape 属性设置搜索框形状，可选值为 square（方形）或 round（圆形）。

<l-search class="search" v-model="value" shape="round" placeholder="请输入关键字" />

自定义

可通过插槽实现复杂的布局，例如自定义左侧内容和右侧图标。

<l-search 
    class="search" 
    padding="16rpx 5rpx 16rpx 24rpx" 
    v-model="value" 
    shape="round" 
    placeholder="请输入关键字">
    <template #left>
        <text style="padding-right: 10px; color: #666">地址</text>
    </template>
    <template #right-icon>
        <l-button type="primary" size="small" shape="round">搜索</l-button>
    </template>
</l-search>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-search/components/lime-search -->
<lime-search />

插件标签说明

• 默认 l-search 为组件标签
• 默认 lime-search 为演示标签

Vue2使用说明

插件使用了composition-api，如果你希望在Vue2中使用，请按官方教程vue-composition-api配置。

关键代码是在main.js中的Vue2部分添加以下代码：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Events

Slots

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助