field 文本框

引入

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

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

基本用法

<field
  value="{{value}}"
  placeholder="请输入用户名"
  bind:change="onChange"
></field>

Page({
  data: {
    value: 'hello world',
  },
  methods: {
    onChange: function(e) {
      var value = e.target.value;
      this.setData({ value: value });
    },
  },
});

自定义类型

<field
  value="{{value}}"
  label="用户名"
  placeholder="请输入用户名"
  bind:change="onChange"
></field>
<field
  value="{{value}}"
  label="密码"
  placeholder="请输入密码"
  type="password"
  bind:change="onChange"
></field>
<field
  value="{{value}}"
  label="文本"
  placeholder="输入框已禁用"
  disabled="{{true}}"
  bind:change="onChange"
></field>
<field
  value="{{value}}"
  label="文本"
  placeholder="输入框已禁用"
  disabled="{{true}}"
  bind:change="onChange"
></field>
<field
  value="{{value}}"
  iconLeft="{{true}}"
  iconRight="{{true}}"
  placeholder="输入框已禁用"
  disabled="{{true}}"
  bind:change="onChange"
>
  <view slot="field-icon">
    <wr-icon name="money" color="blue" dot />
  </view>
  <view slot="field-right">button</view>
</field>

field Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------------ | ----------------- | --------- | ------ | ----- | | iClass | 自定义 class 类名 | string | - | - | | required | 必填 | boolean | - | - | | label | 标签 | string | - | | disabled | 禁填 | bolean | * | false | | placeholder | input placeholder | string | | iconLeft | 左边 slot | bolean | * | false | | iconRight | 右边 slot | bolean | * | false | | value | input value | string | - | | errorMessage | 错误的信息 | string | - |

field Event

| 事件名 | 说明 | 参数 | | ------- | ------------------- | ---- | | change | field 组件时触发 | - | | onClear | field cancel 时触发 | - |