@retailwe/ui-field

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 时触发	-