card-wx-user/uni_modules/uni-field

Field 输入框

输入框组件一般和表单控件 uni-form 配合使用，也可以单独使用，用于实现输入与校验，包括 "text" 和 "textarea" 类型，组件名：uni-field，代码块： uField。

平台差异说明

暂不支持在nvue页面中使用

组件使用注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 组件需要依赖 sass 插件 ，请自行手动安装
• 组件校验需要依赖 uni-forms 组件的forms-rule属性,uni-field 组件暂时不支持单独校验内容
• 组件提供了右侧按钮的插槽，可传入 slot="right"的标签或组件，例如发送验证码的按钮:<button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>
• 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

使用方式

方式1 (推荐)

HBuilderX 2.5.5起支持 easycom 组件模式。在使用 uni-ui 的时候，只要uni-ui 组件 安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用 uni-ui 组件

easycom 组件模式的好处在于不管 components 目录下安装了多少组件，easycom 打包后会自动剔除没有使用的组件，对组件库的使用尤为友好,组件库批量安装，随意使用，自动按需打包。 关于 easycom 更详细内容 参考文档

方式2（vue-cli）

初始化项目

如果是使用 HBuiderX 创建的项目，需先执行以下命令初始化：

npm init -y

安装 uni-ui

npm install @dcloudio/uni-ui -D

在 script 中引用组件

import uniField from '@/components/uni-field/uni-field.vue'
export default {
    components: {uniField}
}

方式3（vue-cli + easycom）

使用 方式2 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json

{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

基本用法

在 template 中使用组件

<uni-field
  v-model="name"
  label="姓名"
  placeholder="请填写姓名"
  :error-message="errorMessage"
/>
<uni-field
  v-model="mobile"
  label="手机号"
  label-position="left"
  placeholder="请填写手机号"
  :error-message="errorMessage"
  type="text"
  :clearable="true"
>
  <button v-if="true" type="primary" slot="right" size="mini">发送验证码</button>
</uni-field>
<uni-field
  v-model="weixin"
  label="微信号"
  label-position="left"
  placeholder="请填写微信号"
  :required="false"
  :focus="true"
  type="text"
  :clearable="true"
  :password="false"
  :disabled="false"
  confirmType="good"
  :error-message="errorMessage"
/>

uni-field 属性说明

uni-field 属性说明

属性名	类型	默认值	说明
type	String	text	输入框的类型
required	Boolean	false	是否必填，左边您显示红色"*"号
left-icon	String	-	label左边的图标，限uni-ui的图标名称
icon-color	String	#606266	左边通过icon配置的图标的颜色
right-icon	Boolean	false	输入框右边的图标名称，限uni-ui的图标名称
label	String	-	输入框左边的文字提示
label-width	Number	65	label的宽度，单位px
label-align	String	left	label的文字对齐方式
label-position	String	left	label的文字的位置
clearable	Boolean	true	是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时显示)，点击可清空输入框内容
placeholder	String	-	输入框的提示文字
placeholder-style	String	-	placeholder的样式(内联样式，字符串)，如color: #ddd"
password	Boolean	false	是否密码输入方式(用点替换文字)，type为text时有效
focus	Boolean	false	是否自动获得焦点
disabled	Boolean	false	是否不可输入
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
confirm-type	String	done	设置键盘右下角按钮的文字，仅在type="text"时生效
clear-size	Number	15	清除图标的大小，单位px
trim	Boolean	true	是否自动去除两端的空格
name	String	-	表单域的属性名，在使用校验规则时必填
input-border	Boolean	false	是否显示input输入框的边框
border-bottom	Boolean	true	是否显示field的下边框
border-top	Boolean	false	是否显示field的上边框
auto-height	Boolean	true	是否自动增高输入区域，type为textarea时有效

uni-field 事件说明

事件称名	说明	返回参数
input	输入框内容发生变化时触发	value 输入的值
focus	输入框获得焦点时触发	event 获取焦点的事件对象
blur	输入框失去焦点时触发	event 失去焦点的事件对象
confirm	点击完成按钮时触发	value 输入的值
right-icon-click	通过right-icon生成的图标被点击时触发	-
click	输入框被点击或者通过right-icon生成的图标被点击时触发	-

插槽

名称	说明
leftIcon	左侧插槽
right	右侧插槽