更新记录

0.0.6（2024-11-20） 下载此版本

• fix: 更换characterLimit

0.0.5（2024-10-27） 下载此版本

• chore: 更新文档

0.0.4（2024-10-27） 下载此版本

• fix: 修复值为null时会显示关闭图标

平台兼容性

lime-search 搜索

• 用于用户输入搜索信息，并进行页面内容搜索。兼容uniapp/uniappx
• 插件依赖lime-style、lime-shared、lime-icon、lime-svg这是个收费的插件，如果不需要svg可以在lime-icon里注释掉

安装

在插件市场导入即可，首次导入可能需要重新编译

代码演示

基础使用

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/compoents/lime-search 
<lime-search />

插件标签

• 默认 l-search 为 component
• 默认 lime-search 为 demo

关于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 变量，可用于自定义样式)。uvue app无效。

常见问题

插件包含一下lime-svg为收费插件。如果你不需要svg，可以在lime-icon里注释掉，lime-svg为APP原生插件，收费为1元，源码为5元。如果你需要svg，可以考虑一下购买。

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。