更新记录

1.0.0(2022-02-08)

1.支持nvue的依赖于键盘打文本输入框


平台兼容性

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

1.引入组件

    import mRelyInput from '@/components/m-rely-input/m-rely-input.nvue'
    export default {
        components:{
            mRelyInput
        },
    }

2.使用

<m-rely-input ref="relyInput"
    v-model="message" 
    @on-confirm="onConfirm">
</m-rely-input>

3.属性

属性名 类型 默认值 说明
value String 内容,可进行v-model
height Number 输入框高度
placeholder String 请输入内容 文本为空时的占位符
placeholderStyle String 占位符样式
confirm-text String 提交 提交按钮文本
confirm-background String #FD7231 提交按钮的文本
confirm-hold Boolean true 提交的时候,是否不收起键盘
padding Object 容器的间距
max-length Number 最大输入长度
min-length Number 2 最小输入长度

3.1 padding属性

类型 默认值 说明
left String 20rpx 距离左侧间距
right String 20rpx 距离左侧间距
top String 15rpx 距离左侧间距
bottom String 15rpx 距离左侧间距

3.2 插槽

name 说明
默认 文本框后,默认为提交按钮
before 文本框前

3.3 方法

方法名 返回值 说明
on-open 打开后执行
on-close 关闭后执行
input 文本输入的时候触发
on-confirm 当前输入内容 点击提交按钮或者键盘提交的时候触发

4.注意

1.只测试了android和ios两个平台,其他平台自行测试,组件是使用nvue开发的;
2.ios平台上,由于获取键盘高度需要在键盘完全弹出后才获取得到,所以文本框会延迟弹出;
3.精力有限,原理很简单,如有问题看下源码基本都能自行修改,实在不会请留言我会定期查看,谢谢;
4.前端小白,请嘴下留情,轻喷。

隐私、权限声明

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

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

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

许可协议

MIT协议

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