更新记录

0.0.1(2024-11-22) 下载此版本

  • init

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.33 app-vue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

lime-input 输入框

  • 用于文本信息输入

安装

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

代码演示

基础使用

通过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>

查看示例

  • 导入后直接使用这个标签查看演示效果
<!-- // 代码位于 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,可以考虑一下购买。

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

打赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问