字段 Field

字段组件。

• 通常结合 <pure-form> 组件使用。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过默认 slot 设置组件内容。
• field 组件只用于布局，不提供任何数据绑定。

<template>
  <pure-field>
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>
</template>

左侧图标

• 通过 leftIcon 属性设置左侧图标名称。

<template>
  <pure-field leftIcon="__weizhi">
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>
</template>

左侧标签

• 通过 label 属性设置字段标签。

<template>
  <pure-field label="地址">
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>
</template>

右侧图标

• 通过 rightIcon 属性设置右侧图标名称。
• 通过 rotate 属性设置图标旋转角度，默认为 0。

<template>
  <pure-field rightIcon="__you2">
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>
</template>

错误提示

• 通过 errorTips 属性设置错误提示信息。

<template>
  <pure-field
    leftIcon="__weizhi"
    label="地址"
    rightIcon="__you2"
    tips="我是错误提示：请输入地址"
  >
    <pure-input placeholder="请输入地址"></pure-input>
  </pure-field>
</template>

必填符号

• 通过 required 属性设置为必填项。
• 通过 requiredText 属性必填项符号，默认"*"。
• 通过辅助类设置符号的位置。

提示

辅助类使用规则

<template>
  <!-- 默认星号 - 位置居左 -->
  <pure-field
    leftIcon="__weizhi"
    label="地址"
    rightIcon="__you2"
    required
    class="pure-field-required-left"
  >
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>

  <!-- 默认星号 - 位置居中 -->
  <pure-field
    leftIcon="__weizhi"
    label="地址"
    rightIcon="__you2"
    required
    class="pure-field-required-middle"
  >
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>

  <!-- 默认星号 - 位置居右 -->
  <pure-field
    leftIcon="__weizhi"
    label="地址"
    rightIcon="__you2"
    required
    class="pure-field-required-right"
  >
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>

  <!-- 自定义符号 - 位置居右 -->
  <pure-field
    leftIcon="__weizhi"
    label="地址"
    rightIcon="__you2"
    required
    requiredText="(必填)"
    class="pure-field-required-right pure-field-required-smaller"
  >
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>
</template>

前后插槽

• 为了方便使用，该组件提供了 before 和 after 两个插槽，分别用于在内容前后添加其他内容。

<template>
  <!-- Before Slot -->
  <pure-field leftIcon="__weizhi" label="地址" rightIcon="__you2">
    <template #before>
      <text>😀😀</text>
    </template>
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>

  <!-- After Slot -->
  <pure-field leftIcon="__daohang_2" label="验证码" rightIcon="__you2">
    <pure-input placeholder="请填写验证码" v-model="smsCode"></pure-input>
    <template #after>
      <pure-button class="pure-button-primary" text="发送验证码"></pure-button>
    </template>
  </pure-field>
</template>

只读状态

• 通过 readonly 属性设置为只读状态。
• 只读状态时仍会触发点击事件。
• 一般用于 Picker 选择时，使用 readonly 属性。

<template>
  <pure-field
    leftIcon="__weizhi"
    label="地址"
    rightIcon="__you2"
    readonly
    @onClick="handleClick"
    class="fixed-left"
  >
    <template #before>
      <text>😀😀</text>
    </template>
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>
</template>

禁用状态

• 通过 disabled 属性设置为禁用状态。
• 禁用状态时不会触发点击事件。

<template>
  <pure-field
    leftIcon="__daohang_2"
    label="验证码"
    rightIcon="__you2"
    borderTop
    class="fixed-left"
    disabled
  >
    <pure-input placeholder="请填写验证码" v-model="smsCode"></pure-input>
    <template #after>
      <pure-button class="pure-button-primary" text="发送验证码"></pure-button>
    </template>
  </pure-field>
</template>

文本对齐方式

• 通过添加对应的辅助类实现。

提示

辅助类使用规则

<template>
  <!-- 默认左对齐 -->
  <pure-field
    leftIcon="__weizhi"
    label="默认左对齐"
    rightIcon="__you2"
    tips="我是错误提示：请输入地址"
    class="pure-field-text-align-left"
  >
    <pure-input placeholder="请输入地址"></pure-input>
  </pure-field>

  <!-- 右对齐 -->
  <pure-field
    leftIcon="__weizhi"
    label="右对齐"
    rightIcon="__you2"
    tips="我是错误提示：请输入地址"
    class="pure-field-text-align-right pure-border-top"
  >
    <pure-input placeholder="请输入地址"></pure-input>
  </pure-field>

  <!-- 居中对齐 -->
  <pure-field
    leftIcon="__weizhi"
    label="居中对齐"
    rightIcon="__you2"
    tips="我是错误提示：请输入地址"
    class="pure-field-text-align-center pure-border-top"
  >
    <pure-input placeholder="请输入地址"></pure-input>
  </pure-field>
</template>

垂直布局

• 通过添加辅助类 pure-field-vertical 使用。

提示

辅助类使用规则

<template>
  <pure-field
    leftIcon="__weizhi"
    label="地址"
    rightIcon="__you2"
    class="pure-field-vertical"
  >
    <pure-input placeholder="请输入地址" v-model="address"></pure-input>
  </pure-field>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
prop	form 对应的字段	String	undefined	-	+1.0.0
rules	验证规则，结合 form 使用时有效	Object	undefined	-	+1.0.0
required	是否必填项，auto时自动计算，Boolean 时表示是或否	[String, Boolean]	auto	true、false	+1.0.0
requiredText	必填项符号	String	*	-	+1.0.0
readonly	是否只读	Boolean	false	true	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	pure-field-disabled	-	+1.0.0
leftIcon	左侧图标名称，同图标组件（Icon）的 name 属性，参考	String	-	-	+1.0.0
leftIconMode	左侧图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	widthFix	-	+1.0.0
rightIcon	右侧图标名称，同图标组件（Icon）的 name 属性，参考	String	-	-	+1.0.0
rightIconMode	右侧图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	widthFix	-	+1.0.0
label	标签文本	String	-	-	+1.0.0
rotate	右侧图标旋转角度	[String, Number]	undefined	0-360	+1.0.0
tips	错误提示	String	-	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	-	+1.0.0

Slots

名称	说明	参数	版本
default	默认，内容	-	+1.0.0
label	标签	-	+1.0.0
before	内容前	-	+1.0.0
after	内容后	-	+1.0.0