更新记录

0.2.0（2025-09-29） 下载此版本

• fix: 修复uniapp 缺少box-sizing导致样式问题

0.1.9（2025-06-27） 下载此版本

• feat: 增加clearIconSize设置删除图标大小属性
• feat: 针对hbx4.71 uniappx app端开启 CSS 变量

0.1.8（2025-06-05） 下载此版本

• fix: 修复uniappx text文本不向双向绑定的问题

平台兼容性

uni-app(4.55)

uni-app x(4.64)

lime-input 输入框组件

一个功能丰富的输入框组件，支持多种输入类型、状态和样式。组件提供了丰富的自定义选项，包括前缀图标、后缀图标、清除按钮、提示文本等，可以满足各种复杂的表单输入需求。

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

文档链接

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

• 输入框组件文档 - 站点1
• 输入框组件文档 - 站点2
• 输入框组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-input
2. 导入后可能需要重新编译项目
3. 在页面中使用l-input组件

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

代码演示

基础使用

通过v-model双向绑定或通过value设置值，通过placeholder设置占位符

<l-input v-model="value" placeholder="请输入文字"></l-input>

const value = ref('')

标题

通过label设置标题，通过placeholder设置占位符

<l-input v-model="value" label="标签文字" placeholder="请输入文字"></l-input>

字数限制

通过maxlength设置最多可以输入的文本长度，通过tips设置提示文本

<l-input v-model="value" label="标签文字" placeholder="请输入文字" :maxlength="10" tips="最大输入10个字符"></l-input>

前置图标

通过prefix-icon设置标题前的图标

<l-input label="标签文字" placeholder="请输入文字" prefix-icon="fingerprint-2" ></l-input>

前置图标插槽

通过prefix-icon插槽可自定义标题前的内容

<l-input label="标签文字" placeholder="请输入文字">
    <template #prefix-icon>
        <l-icon name="fingerprint-2" size="44rpx"></l-icon>
    </template>
</l-input>

后置图标

通过suffix-icon设置后置的图标

<l-input label="标签文字" placeholder="请输入文字" suffix-icon="info-circle-filled"></l-input>

后置插槽

通过suffix插槽可以自定义后置内容

<l-input label="标签文字" placeholder="请输入文字" >
    <template #suffix>
         <l-button type="primary" size="mini">操作按钮 </l-button>
    </template>
</l-input>

后置图标插槽

通过suffix-icon插槽可以自定义后置图标位内容

<l-input label="标签文字" placeholder="请输入文字" >
    <template #suffix-icon>
        <l-icon name="user-avatar" size="44rpx"></l-icon>
    </template>
</l-input>

输入框类型

通过type可以设置输入框类型，通过clearable属性设置是否显示可清空图标

<l-input v-model="value" type="password" label="输入密码" placeholder="请输入密码" :clearable="true"></l-input>

输入框状态

通过status可以设置输入框状态

<l-input label="标签文字" placeholder="请输入文字" value="已输入文字" status="error" tips="辅助说明"></l-input>

禁用状态

通过disabled可以设置输入框禁用

<l-input label="不可编辑" placeholder="请输入文字" value="不可编辑文字" disabled></l-input>

竖向布局

通过layout属性设置vertical可为竖向布局

<l-input label="标签文字" layout="vertical" placeholder="请输入文字"></l-input>

经典边框样式

设置classic属性，使用经典边框样式。

<l-input 
  v-model="value" 
  classic
  placeholder="经典边框样式"
></l-input>

快速预览

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

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

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

Events 事件

Slots 插槽

主题定制

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

支持与赞赏

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

支付宝赞助	微信赞助