textarea 标签

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-textarea": "@retailwe/ui-textarea/index"
}

代码演示

基础用法

<wr-textarea
  placeholder="请输入内容"
  bindinput="onInput"
></wr-textarea>

Page({
  data: {
    value: '',
  },
  onInput(e: any) {
    const { index } = e.currentTarget.dataset;
    const { value } = e.detail;
    this.setData({
      'value': value,
    });
  },
});

带边框

<wr-textarea
  placeholder="请输入内容"
  border
  bindinput="onInput"
></wr-textarea>

限制内容长度

<wr-textarea
  placeholder="请输入内容"
  border
  maxlength="10"
  show-count
  bindinput="onInput"
></wr-textarea>

高度自适应

<wr-textarea
  placeholder="请输入内容"
  border
  auto-height
  bindinput="onInput"
></wr-textarea>

API

Props

以下属性会透传至原生textarea： type, showConfirmBar, adjustPosition, value, placeholder, maxlength, focus, disabled,

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | showCount | 是否显示字数统计，仅maxlength大于-1时有效 | number | false | - | | border | 是否显示边框和内边距，默认无边距无边框 | boolean | false | - | | value | 已输入的文本内容 | string | - | - | | placeholder | value为空时的占位内容 | string | - | - | | maxlength | 内容最大长度，-1代表不做限制 | number | -1 | - | | type | 请参考原生textarea的type属性 | number | -1 | - | | showConfirmBar | 软件盘上是否显示完成按钮 | boolean | true | - | | autoFocus | 自动获取焦点 | boolean | false | - | | focus | 是否获取焦点 | boolean | false | - | | adjustPosition | 键盘弹起时是否自动上推页面 | boolean | true | - | | cursorSpacing | 键盘弹起时组件底部与键盘的距离，请参考原生textarea的type属性 | number | 0 | - | | disabled | 是否禁用组件 | boolean | false | - | | autoHeight | 是否开启高度自适应 | boolean | false | - |

Event

| 事件名 | 说明 | 参数 | |------|------|------| | input | 输入内容变化时触发 | { value } | | confirm | 点击键盘上的完成按钮时触发 | { value } | | focus | 获取焦点时触发, height为键盘高度 | { value, height } | | blur | 失去焦点时触发, cursor为游标位置 | { value, cursor } |

外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点外部样式类 | | wr-class-placeholder | 预设内容外部样式类 |