HIPS-UNI-UI

# Textarea 输入域

# 使用指南

import Textarea from '@hips/uni-ui/lib/textarea';

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

# 跨平台支持

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

# 代码演示

# 基础用法

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

# 占位内容及其样式

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

# 标签及位置

<hips-textarea
  v-model="value"
  label="标签在顶部"
  label-position="top"
  placeholder="标签在顶部"
/>
<hips-textarea v-model="value" label="标签在左侧" placeholder="标签在左侧" />
<hips-textarea v-model="value" placeholder="没有标签" />
<hips-textarea
  v-model="value"
  label="用户名"
  label-icon="person"
  placeholder="带Icon标签"
/>
<hips-textarea
  v-model="value"
  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-textarea v-model="value" label="用户名" required placeholder="此处必填" />
1

# 禁用

<hips-textarea
  v-model="value"
  label="用户名"
  disabled
  placeholder="此处已禁用"
/>
1
2
3
4
5
6

# 输入内容对齐方式

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

# 显示删除按钮

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

# 设定最大长度

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

# 高度自动扩张

<hips-textarea
  v-model="value"
  label="用户名"
  auto-height
  show-clear
  placeholder="输入高度会自动扩大"
/>
1
2
3
4
5
6
7

# 延迟调用 change 事件

<hips-textarea
  v-model="value"
  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-textarea
  v-model="value"
  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 - -
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
auto-height 是否自动增高，设置 auto-height 时，style.height 不生效 Boolean - false
show-confirmbar 是否显示键盘上方带有”完成“按钮那一栏 Boolean - false
fixed 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true Boolean - false
show-clear 是否显示情况按钮 Boolean - false
input-align 输入内容对齐方式 String [left,center,right] left
debounce 延迟调用 change 事件的时间 [Number,String] - 3000
max-length 最大输入长度(-1 表示不校验) Number - -1
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-textarea
  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 发生修改事件 -
click-label 点击标签事件 -
line-change 输入框行数变化时调用 {height: 0, heightRpx: 0, lineCount: 0}

# 样式变量

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

注意

Checkbox 复选框