HIPS-UNI-UI

# Input 输入框

# 使用指南

import Input from '@hips/uni-ui/lib/input';

export default {
  components: {
    'hips-input': Input,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-input v-model="value"></hips-input>
1
export default {
  data() {
    return {
      value: '',
    };
  },
};
1
2
3
4
5
6
7

# 设置类型

<hips-input v-model="input" label="数字" type="number" />
<hips-input
  v-model="input"
  label="密码"
  type="password"
  placeholder="密码不可视"
/>
<hips-input
  v-model="input"
  label="密码"
  type="password"
  placeholder="密码可视"
  password-visiable
/>
<hips-input v-model="input" label="证件号" type="idcard" />
<hips-input v-model="input" label="浮点数" type="digit" />
<hips-input v-model="input" label="搜索" type="search" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 占位内容及样式

<hips-input v-model="input" label="用户名" placeholder="占位内容" />
<hips-input
  v-model="input"
  label="用户名"
  placeholder="修改占位内容样式"
  :placeholder-style="{color: 'red', fontSize: '10px'}"
/>
1
2
3
4
5
6
7

# 设置标签及位置

<hips-input
  v-model="input"
  label="标签在顶部"
  label-position="top"
  placeholder="标签在顶部"
/>
<hips-input v-model="input" label="标签在左侧" placeholder="标签在左侧" />
<hips-input v-model="input" placeholder="没有标签" />
<hips-input
  v-model="input"
  label="用户名"
  label-icon="person"
  placeholder="带Icon标签"
/>
<hips-input
  v-model="input"
  label="用户名"
  :label-image="NormalIcon"
  placeholder="带图片标签"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 必输校验

<hips-input v-model="input" label="用户名" required placeholder="此处必填" />
1

# 禁用

<hips-input v-model="input" label="用户名" disabled placeholder="此处已禁用" />
1

# 输入内容对齐方式

<hips-input v-model="input" label="居左" placeholder="输入的内容居左" />
<hips-input
  v-model="input"
  label="居中"
  input-align="center"
  placeholder="输入的内容居中"
/>
<hips-input
  v-model="input"
  label="居右"
  input-align="right"
  placeholder="输入的内容居右"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 显示删除按钮

<hips-input
  v-model="input"
  label="用户名"
  show-clear
  placeholder="输入后会显示删除按钮"
/>
1
2
3
4
5
6

# 设定最大长度

<hips-input
  v-model="input"
  label="用户名"
  :max-length="12"
  placeholder="超出长度12输入无效"
/>
1
2
3
4
5
6

# 延迟调用 change 事件

<hips-input
  v-model="input"
  label="用户名"
  debounce="3000"
  placeholder="3000ms 后调用 change 事件"
  @change="handleChange"
/>
1
2
3
4
5
6
7
export default {
  methods: {
    handleChange() {
      console.log('handleChange');
    },
  },
};
1
2
3
4
5
6
7

# 自定义校验函数

<hips-input
  v-model="input"
  label="用户名"
  :validator="validator"
  placeholder="判断至少输入6位内容"
/>
1
2
3
4
5
6
export default {
  methods: {
    validator(val) {
      if (val.length < 6) {
        return '请至少输入6位内容';
      }
      return true;
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# API

参数 说明 类型 可选值 默认值
value v-model 绑定，控制显示隐藏 Any - -
type 类型 ['text','number','password','idcard','digit','search'] - text
label 标签 String - -
label-position 标签位置 String ['left','top'] left
label-icon 标签 Icon String - -
label-image 标签图片 String - -
placeholder 占位内容 String - -
placeholder-style 占位内容 style(支持 color,font-size,font-weight 属性) Object - { fontSize: '28rpx' }
required 是否必填 Boolean - false
disabled 是否禁用 Boolean - false
readonly 是否只读 Boolean - false
show-clear 是否显示情况按钮 Boolean - false
input-align 输入内容对齐方式 String [left,center,right] left
password-visiable 密码是否可视 Boolean - false
debounce 延迟调用 change 事件的时间 [Number,String] - 3000
max-length 最大输入长度(-1 表示不校验) Number - -1
confirm-type 键盘确认按钮类型 String ['send','search','next','go','done'] done
confirm-hold 点击键盘确认按钮是否不收起键盘 Boolean - false
cursor-position 指定 focus 时的光标位置 Number - -
selection-start 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 Number - -1
selection-end 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 Number - -1
adjust-position 键盘弹起时，是否自动上推页面 Boolean - true
validator 自定义校验规则方法 Function - -
error-msg-require 必输校验失败提示信息 String - 此项目必填
click-label-focus 点击标签聚焦 Boolean - true

注意

validator 参数传递一个方法，该方法接收当前输入的内容，可以进行校验 当校验逻辑失败时，请返回失败的提示信息 当校验逻辑成功时，请返回 true

<hips-input
  v-model="input2"
  label="用户名"
  :validator="validator"
  placeholder="判断至少输入6位内容"
/>
1
2
3
4
5
6
export default {
  methods: {
    validator(val) {
      if (val.length < 6) {
        return '请输入6位内容';
      }
      return true;
    },
  },
};
1
2
3
4
5
6
7
8
9
10

# Functions

名称 说明 参数
focus 通过 ref 聚焦 -
blur 通过 ref 失焦 -

# Events

名称 说明 参数
focus 获取焦点事件 -
blur 失去焦点事件 -
confirm 点击键盘确认按钮事件 -
change 发生修改事件 -
search search 类型点击放大镜图标事件 -
click-label 点击标签事件 -

# 样式变量

变量名 说明 默认值
input-label-image-width 标签图片宽度 44rpx
input-label-image-height 标签图片高度 44rpx
input-label-top-height 顶部标签宽度 80rpx
input-label-min-width 标签最小宽度 170rpx
input-label-color 标签颜色 #4d4d4d
input-label-font-size 标签字体大小 32rpx
input-label-icon-padding-right 标签图标图片右侧 padding 10rpx
input-body-height 输入容器高度 100rpx
input-color 输入后文字颜色 #4d4d4d
input-font-size 输入后文字大小 28rpx
input-error-font-size 错误信息文字大小 24rpx
input-error-color 错误信息文字颜色 #F96F68
input-required-font-size 必输标签文字大小 24rpx
input-required-color 必输标签文字颜色 #F96F68
input-border-color 边框颜色 #eeeeee
input-disabled-input-color 禁用状态输入内容颜色 #D2D2D2

注意

Textarea 输入域