Field 表单字段

使用指南

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

规则

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

代码演示

查看代码

<template>
  <div class="list">
    <h3-field
      label="短文本"
      labelIcon="IconFormEditStroke"
      required
      focus
      validateStatus="error"
      help="该信息填写有误"
    >
      <h3-input ref="input" type="text" placeholder="请输入" />
    </h3-field>

    <h3-field
      label="短文本"
      labelIcon="IconFormEditStroke"
      required
      :focus="input1Focus"
    >
      <h3-input
        ref="input"
        type="text"
        placeholder="请输入"
        @focus="input1Focus = true"
        @blur="input1Focus = false"
      />
      <template #label-extra>
        自定义其它操作
      </template>
    </h3-field>

    <h3-field
      label="短文本"
      labelIcon="IconFormEditStroke"
      required
      :focus="input2Focus"
    >
      <h3-input
        ref="input"
        type="text"
        placeholder="请输入"
        count
        :maxlength="20"
        @focus="input2Focus = true"
        @blur="input2Focus = false"
      />
    </h3-field>

    <h3-field label="长文本" required :focus="textareaFocus">
      <h3-textarea
        ref="textarea"
        :maxlength="10"
        :border="true"
        count
        placeholder="请输入"
        @focus="textareaFocus = true"
        @blur="textareaFocus = false"
      />
    </h3-field>

    <h3-field label="单选">
      <h3-cell isLink :touchable="false">
        <template #title>
          <div class="cell-tag-wrap">
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
          </div>
        </template>
      </h3-cell>
    </h3-field>

    <h3-field label="多选">
      <h3-cell isLink :touchable="false">
        <template #title>
          <div class="cell-tag-wrap">
            <h3-tag>选项一</h3-tag>
            <h3-tag>选项一</h3-tag>
          </div>
        </template>
      </h3-cell>
    </h3-field>

    <!-- <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="IconQuestionCircleStroke" size="16" color="#999" />
        </h3-tooltip>
      </template>
      <div>tooltips提示</div>
    </h3-field>
    <p class="sub-title">
      水平布局 toast提示
    </p>
    <h3-field label="字段XX" labelIcon="IconQuestionCircleStroke" @labelIconClick="visibleToast = true">
      <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="IconUsbStroke" />
      </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="IconUserGapStroke" />
      </template>
      <div>内容区域所有事件屏蔽</div>
    </h3-field>

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

<script>
import { H3Field } from '@/components/h3-field';
import H3Input from '@/components/h3-input';
import H3Textarea from '@/components/h3-textarea';
import H3Cell from '@/components/h3-cell';
import H3Tag from '@/components/h3-tag';

export default {
  components: {
    H3Field,
    H3Input,
    H3Textarea,
    H3Cell,
    H3Tag,
  },
  data () {
    return {
      tips: '素的区域自定义输入元素的区域自定义输入元素的区域自定义输入元素的区域',
      visibleToast: false,
      input1Focus: false,
      input2Focus: false,
      textareaFocus: false,
    };
  },
  methods: {
    onClickFn () {
      console.log('abc');
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px 15px 0;
  }
  .cell-tag-wrap {
    margin-bottom: -8px;
    .h3think-tag {
      margin-bottom: 8px;
    }
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的表单字段组件规范修改相关样式

若要做迁移请参考

1. 弃用的props：layout labelWidth contentIcon reversed showIcon readonly contentCls labelCls errorInfoCls

2. 替换的props：

   • errorInfo => help

3. 新增的props：validateStatus focus

4. 弃用原来所有的事件

API

Prop Field

参数	说明	类型	默认值	版本
label	label 标签的文本	String	-	-
labelIcon	label 标签的文本(H3-Icon)	String	-	-
required	是否显示表单必填星号	Boolean	false	-
help	提示信息	String	-	-
validateStatus	校验状态，可选：error	String	-	-
focus	是否聚焦	Boolean	-	-

Slots Field

参数	说明
default	Field 内组件
label-extra	label 右侧自定义操作部分