Field 表单字段

使用指南

表单字段组件，仅包含布局结构，需要组合如 h3-input、h3-picker 等其他组件来使用

规则

• 请组合如 h3-input、h3-picker 等其他组件来使用

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      水平布局 tooltips提示
    </p>
    <h3-field label="字段XX">
      <template #label-icon>
        <h3-tooltip
          :content="tips"
          placement="bottom-start"
          type="primary"
          width="60vw"
        >
          <h3-icon type="question-circle-o" size="16" color="#999" />
        </h3-tooltip>
      </template>
      <div>tooltips提示</div>
    </h3-field>
    <p class="sub-title">
      水平布局 toast提示
    </p>
    <h3-field @labelIconClick="visibleToast = true" label="字段XX" labelIcon="question-circle-o">
      <div>toast 提示</div>
    </h3-field>
    <h3-toast v-model="visibleToast" :duration="2000" text="toast 提示" />
    <p class="sub-title">
      垂直布局
    </p>
    <h3-field :required="true" label="字段XX" layout="vertical">
      <span slot="label-extra">垂直模式下的 label-extra slot</span>
      <div>默认描述属性描述属性描述属性描述属性描述属性描述属性描述属性述属性描述属性描述属性描述属性描述</div>
    </h3-field>

    <p class="sub-title">
      内容区域不显示图标
    </p>
    <h3-field :showIcon="false" :required="true" label="左右结构">
      <div>自定义输入元素区域</div>
    </h3-field>

    <p class="sub-title">
      错误信息
    </p>
    <h3-field :required="true" label="错误信息" errorInfo="您输入的信息错误">
      <div>自定义输入元素区域</div>
    </h3-field>

    <p class="sub-title">
      label图标slots
    </p>
    <h3-field label="USB">
      <template #label-icon>
        <h3-icon type="usb-o" />
      </template>
      <div>sadfasdfsdfwerew</div>
    </h3-field>

    <p>label 支持水平反转</p>
    <h3-field reversed label="用户名">
      <div>label图标在前面</div>
    </h3-field>

    <p>只读模式</p>
    <h3-field reversed readonly label="用户名">
      <template #label-icon>
        <h3-icon type="user-o" />
      </template>
      <div>内容区域所有事件屏蔽</div>
    </h3-field>

    <p>content 图标更改</p>
    <h3-field label="用户名" contentIcon="up">
      <template #label-icon>
        <h3-icon type="user-o" />
      </template>
      <div>内容区域所有事件屏蔽</div>
    </h3-field>
  </div>
</template>

<script>
import { H3Field } from '@/components/h3-field';
import H3Tooltip from '@/components/h3-tooltip';
import H3Toast from '@/components/h3-toast';
import H3Icon from '@/components/h3-icon';

export default {
  components: {
    H3Field,
    H3Icon,
    H3Tooltip,
    H3Toast,
  },
  data () {
    return {
      tips: '素的区域自定义输入元素的区域自定义输入元素的区域自定义输入元素的区域',
      visibleToast: false,
    };
  },
  methods: {
    onClickFn () {
      console.log('abc');
    },
  },
};
</script>
<style lang="less">
.list {
  background-color: #fff;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px 15px 0;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧版组件提示固定，不能调整，因此将其分离出来，现在需要自主实现提示

若要做迁移请参考

1. 弃用的props：contentAlign tip

2. 替换的props：

   • readOnly => readonly

3. 新增的props：reversed errorInfo errorInfoCls

4. 弃用原来所有的事件

API

Prop Field

参数	说明	类型	默认值	版本
layout	输入框的布局方式，分水平、垂直	String，可选值 horizontal、vertical	horizontal	-
label	输入框左侧文本	String	-	-
labelWidth	labei 区域内文本宽度	String | Number	-	-
labelIcon	可以替换帮助的图标(H3-Icon)	String	-	-
contentIcon	可以替换箭头那里的图标(H3-Icon)	String	-	-
reversed	label 文字和图标支持水平交换	Boolean	false	-
required	是否显示表单必填星号	Boolean	false	-
showIcon	是否显示内容区域 icon	Boolean	true	-
readonly	只读状态不能操作内容区域(包括事件)	Boolean	false	-
errorInfo	底部错误提示文案，为空时不展示	String	-	-
contentCls	content 区域额外类名	String	-	-
labelCls	label 区域额外类名	String	-	-
errorInfoCls	改动错误文本的类名	String	-	-

Slots Field

参数	说明
label-text	label 内容插槽
label-icon	label icon 自定义插槽内容
content-icon	content icon 区域或图标自定义插槽只能出现一个
label-extra	只有在垂直模式下才支持该插槽

Event Field

事件名	说明	参数
labelIconClick	label icon 区域事件回调	-
labelTextClick	label 文本区域事件回调	-
contentClick	content 全区域事件回调	-
contentIconClick	content 箭头图标区域事件回调	-
contentTextClick	content 文本区域事件回调	-

Prop Label

参数	说明	类型	默认值	版本
label	输入框左侧文本	String	-	-
labelCls	label 区域额外类名	String	-	-
labelWidth	labei 区域内文本宽度	String	-	-
labelIcon	可以替换帮助的图标(H3-Icon)	String	-	-
reversed	label 文字和图标支持水平交换	Boolean	false	-
required	是否显示表单必填星号	Boolean	false	-

Slots Label

参数	说明
label-icon	label icon 自定义插槽内容

Event Label

事件名	说明	参数
labelIconClick	label icon 区域事件回调	-
labelTextClick	label 文本区域事件回调	-