更新记录

1.0.2(2020-03-20) 下载此版本

1.新增左侧文本 2.新增可以指定左侧文本宽度

1.0.1(2020-03-20) 下载此版本

1.新增disabledClear参数(是否禁用清空按钮) 2.删除clear参数

1.0.0(2020-03-11) 下载此版本

第一次发版

查看更多

平台兼容性

主要功能

  • 可以清除input输入框的值
  • 可以根据唯一tag获取对应输入框的值
  • 可以自定义初始值

自定义属性说明

属性名 类型 默认值 说明
label String 左侧文本值
label-width Number,String 左侧文本值宽度
value String 输入框的初始内容
type String text input 的类型(text number idcard digit)
maxlength Number,String -1 最大输入长度
placeholder String 输入框为空时占位符
password Boolean false 是否是密码类型
placeholderStyle String 指定 placeholder 的样式
placeholderClass String input-placeholder 指定 placeholder 的样式类
disabled Boolean false 是否禁用
focus Boolean false 获取焦点
cursor Number 指定focus时的光标位置
disabledClear Boolean false 是否禁用清空按钮
tag String input 唯一标识符,当多个输入框时获取对应输入框的值

可触发事件

事件名称 说明
getInputValue 用于获取输入框的值,event = {tag: tag, value: value}
blur 输入框失去焦点时触发,event.detail = {value: value}
focus 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度
confirm 点击完成按钮时触发,event.detail = {value: value}
keyboardheightchange 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}

可使用示例

复制代码<clear-input 
        label="手机号码"
        label-width="80"
        tag="phone"
        :value="phone"
        maxlength="11"
        placeholder="请输入手机号码"
        type="number"
        @getInputValue="getInputValue"
    />

    methods: {
      getInputValue(e) {
        console.log(e)
      },
     }

隐私、权限声明

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

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

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

许可协议

MIT协议
972***@qq.com

2021-03-02

清除功能没用啊,点击了清除输入框里是没有值啦,但是v-model绑定的值还是没有清空,这是什么情况呀楼主

_wlf 2021-03-02

不支持v-model

土豆三三

2020-10-10

LitterStar

2020-07-22

735***@qq.com

2020-06-03

用验证码要自己加吗

_wlf 2020-06-03

是的

总是多放盐

2020-05-14

用的时候输入框前面有个true?

_wlf 2020-05-15

有截图看下嘛

119***@qq.com

2020-05-06

插件怎么安装啊

_wlf 2020-05-06

直接下载 放到项目中使用

842***@qq.com

2020-04-29

不支持v-model

jaychou_716

2020-04-23

可以了,非常感谢!

_wlf 2020-04-22

.sms-box { display: flex; justify-items: center; align-items: center; margin-top: 10px;

  .left {
    flex: 1;
  }

  .right {
    flex: none;
  }
}

left 是输入框的class right是按钮的class

上官葡萄

2020-05-26

安卓真机调试无效

_wlf 2020-05-26

哪里无效 我这边小程序 h5 都有测试可以

_wlf

2020-03-11

不错,项目刚好用到

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