LimeInput 输入框

用于文本信息输入

安装

在导入即可，首次导入可能需要重新编译

代码演示

基础使用

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

html

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

const value = ref('')

标题

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

html

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

字数限制

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

html

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

前置图标

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

html

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

前置图标插槽

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

html

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

后置图标

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

html

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

后置插槽

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

html

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

后置图标插槽

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

html

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

输入框类型

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

html

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

输入框状态

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

html

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

禁用状态

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

html

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

竖向布局

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

html

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

查看示例

导入后直接使用这个标签查看演示效果

html

<!-- // 代码位于 uni_modules/limeinput/compoents/limeinput -->
<limeinput />

插件标签

默认 linput 为 component
默认 limeinput 为 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

参数	说明	类型	默认值
v-model	输入框的值。	string	``
value	输入框的值。	string	``
align	文本内容位置，居左/居中/居右。可选项：left/center/right	string	`left`
alwaysEmbed	强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)	boolean	`false`
autoFocus	自动聚焦，拉起键盘	boolean	`false`
borderless	是否开启无边框模式	boolean	`false`
clearable	是否可清空，默认不启动。	boolean	`false`
clearTrigger	清空图标触发方式，仅在输入框有值时有效。可选项：always / focus	string	`focus`
confirmHold	点击键盘右下角按钮时是否保持键盘不收起	boolean	`false`
confirmType	设置键盘右下角按钮的文字。	string	`done`
cursor	指定 focus 时的光标位置	number	``
cursorColor	光标颜色	string	``
cursorSpacing	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离	number	`0`
disabled	是否禁用输入框	boolean	`false`
focus	获取焦点	boolean	`false`
closeable	是否显示关闭图标	boolean	`false`
holdKeyboard	focus时，点击页面的时候不收起键盘	boolean	`false`
label	左侧文本	string	``
layout	标题输入框布局方式。可选项：vertical/horizontal	string	`horizontal`
maxlength	用户最多可以输入的文本长度	number	`-1`
placeholder	占位符	string	``
placeholderStyle	指定 placeholder 的样式	string	``
readonly	只读状态	boolean	`false`
safePasswordCertPath	安全键盘加密公钥的路径，只支持包内路径	string	``
safePasswordCustomHash	安全键盘计算 hash 的算法表达式	string	``
safePasswordLength	安全键盘输入密码长度	number	``
safePasswordNonce	安全键盘加密盐值	string	``
safePasswordSalt	安全键盘计算 hash 盐值	string	``
safePasswordTimeStamp	安全键盘加密时间戳	number	``
selectionEnd	光标起始位置，自动聚集时有效	number	`-1`
selectionStart	光标起始位置，自动聚集时有效	number	`-1`
status	输入框状态。可选项：default/success/warning/error	string	`default`
prefixIcon	后置图标名称，等同于 Icon 组件的 name 属性	string	``
prefixIconSize	后置图标大小	string	``
prefixIconColor	后置图标颜色	string	``
suffix	后置图标前的后置内容	string	``
suffixIcon	后置图标名称，等同于 Icon 组件的 name 属性	string	``
suffixIconSize	后置图标大小	string	``
suffixIconColor	后置图标颜色	string	``
tips	输入框下方提示文本，会根据不同的 `status` 呈现不同的样式	string	``
type	输入框类型。可选项：text/number/idcard/digit/safe-password/password/nickname	string	`text`
lStyle	自定义样式	string	`-`
lableStyle	左侧标题样式	string	`-`
tipsStyle	提示样式	string	`-`
inputStyle	内部输入框样式	string	`-`

Events

事件名	说明	回调参数
change	输入框值发生变化时触发	-
focus	获得焦点时触发	-
blur	失去焦点时触发	-
confirm	回车键按下时触发	-
clear	清空按钮点击时触发	-
click	点击事件	-
keyboardheightchange	键盘高度发生变化的时候触发此事件	-
nicknamereview	用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效	-

Slots

名称	说明
prefix-icon	组件前置图标
label	组件标题
suffix	组件后置
suffix-icon	组件后置图标
tips	组件提示

主题定制

样式变量

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

名称	默认值	描述
--l-input-vertical-padding	32rpx	-
--l-input-text-color	$text-color-1	-
--l-input-tips-color	$success-color	-
--l-input-warning-text-color	$warning-color	-
--l-input-success-tips-color	_$success-color	-
--l-input-warning-tips-color	$warning-color	-
--l-input-error-tips-color	$error-color	-
--l-input-bg-color	$bg-color-container	-
--l-input-border-color	$border-color-2	-
--l-input-border-left-space	32rpx	-
--l-input-border-right-space	0	-
--l-input-placeholder-text-color	$text-color-3	-
--l-input-placeholder-text-font-size	$font-size-md	-
--l-input-prefix-icon-color	$text-color-1	-
--l-input-suffix-icon-color	$text-color-3	-
--l-input-label-text-color	$text-color-1	-
--l-input-suffix-text-color	$text-color-1	-
--l-input-disabled-text-color	$text-color-4	-
--l-input-border-radius	$border-radius	-
--l-input-label-min-width	$font-size-md	-
--l-input-label-min-width	2em	-
--l-input-label-max-width	5em	-

常见问题

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

html

// 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> -->

打赏

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

源代码

组件源码

LimeInput 输入框 ​

安装 ​

代码演示 ​

基础使用 ​

标题 ​

字数限制 ​

前置图标 ​

前置图标插槽 ​

后置图标 ​

后置插槽 ​

后置图标插槽 ​

输入框类型 ​

输入框状态 ​

禁用状态 ​

竖向布局 ​

查看示例 ​

插件标签 ​

关于vue2的使用方式 ​

API ​

Props ​

Events ​

Slots ​

主题定制 ​

样式变量 ​

常见问题 ​

打赏 ​

源代码 ​

LimeInput 输入框

安装

代码演示

基础使用

标题

字数限制

前置图标

前置图标插槽

后置图标

后置插槽

后置图标插槽

输入框类型

输入框状态

禁用状态

竖向布局

查看示例

插件标签

关于vue2的使用方式

API

Props

Events

Slots

主题定制

样式变量

常见问题

打赏

源代码