@retailwe/ui-textarea NPM

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 }`