更新记录
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> -->
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。