VTJ.PRO

Appearance

XField 字段 ​

示例 ​

基础用法 ​

字段名称
字段名称

<template>
  <div class="page">
    <XField
      ref="fieldRef"
      v-model="fieldValue"
      @focus="onFocus"
      @blur="onBlur"
      @change="onChange">
    </XField>

    <XField
      label="字段名称"
      label-width="100px"
      editor="text"
      required
      error="错误信息"
      :inline-message="true"
      :show-message="true"
      @change="onChange"
      :tooltipMessage="true"
      tooltip-position="outer">
    </XField>

    <XField
      label="字段名称"
      label-width="100px"
      editor="textarea"
      placeholder="多行文本"
      :disabled="disabled">
    </XField>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { XField } from '@vtj/ui';

  const fieldValue = ref('');
  const fieldRef = ref();
  const disabled = ref(false);

  const onChange = (val: any) => {
    console.log('onChange', val);
  };

  const onFocus = () => {
    console.log('onFocus');
  };

  const onBlur = () => {
    console.log('onBlur');
  };
</script>

输入框类型 选择器 ​

数据选择器
请输入数据选择器
表格编辑器

<template>
  <div>
    <XField
      label="数据选择器"
      editor="picker"
      :props="{ loader, columns, valueKey: 'id', onPicked }">
    </XField>
    <XField
      label="表格编辑器"
      editor="grid"
      :model-value="{ a: 1 }"
      :props="dialogGrid">
    </XField>
  </div>
</template>

<script setup lang="ts">
  import { XField } from '@vtj/ui';
  import { request, arrayToKv, kvToArray } from '@vtj/utils';

  const fetchData = (data: any) => {
    return request({
      url: '/api',
      method: 'get',
      data,
      settings: {
        originResponse: false
      }
    });
  };

  const loader: any = async (params: any) => {
    console.log('do load', params);
    const { page, pageSize = 50, form } = params || {};
    return await fetchData({
      ...form,
      currentPage: page,
      pageSize,
      total: 1000
    });
  };

  const columns = [
    {
      field: 'id',
      title: 'ID'
    },
    {
      field: 'name',
      title: '姓名'
    },

    {
      field: 'sex',
      title: '性别'
    },
    {
      field: 'age',
      title: '年龄'
    },
    {
      field: 'intro',
      title: '简介'
    },
    {
      field: 'join',
      title: '入职日期'
    },
    {
      field: 'create',
      title: '创建时间'
    }
  ];

  const onPicked = (data: any) => {
    console.log('picked', data);
  };

  const dialogGrid = {
    title: '键值对',
    columns: [
      {
        type: 'checkbox',
        title: '',
        width: 60
      },
      {
        type: 'seq',
        title: '序号',
        width: 60
      },
      {
        field: 'key',
        title: '键',
        editRender: {
          name: 'XInput'
        }
      },
      {
        field: 'value',
        title: '值',
        editRender: {
          name: 'XInput'
        }
      }
    ],
    formatter: kvToArray,
    valueFormatter: arrayToKv
  };
</script>

输入框类型 选项 ​

字段名称
请输入字段名称
字段名称-多选
请输入字段名称-多选

<template>
  <div class="page">
    <XField
      label="字段名称"
      error="错误信息"
      label-width="120px"
      editor="select"
      :options="options"
      tooltip-position="inner">
      <template #option="{ option }">
        <div>-- {{ option.label }}</div>
      </template>
    </XField>

    <XField
      label="字段名称-多选"
      error="错误信息"
      label-width="120px"
      editor="select"
      :props="{ multiple: true }"
      :options="options"
      tooltip-position="outer">
      <template #option="{ option }">
        <div>-- {{ option.label }}</div>
      </template>
    </XField>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { XField } from '@vtj/ui';

  const options: any = ref([
    { label: '选项一', value: 1 },
    { label: '选项二', value: 2, disabled: true },
    { label: '选项三', value: 3 },
    { label: '选项四', value: 4 }
  ]);
</script>

输入框类型 单选框 多选框 ​

字段名称
搜索
字段名称
字段名称

<template>
  <div>
    <XField
      label="字段名称"
      error="错误信息"
      v-model="fieldValue"
      label-width="100px"
      :options="optionsLoader"
      tooltip-position="outer"
      @focus="onFocus"
      @blur="onBlur"
      @change="onChange">
      <template #editor="{ editor }">
        <ElInput v-bind="editor">
          <template #prepend>搜索</template>
        </ElInput>
      </template>
    </XField>

    <XField
      label="字段名称"
      error="错误信息"
      label-width="100px"
      editor="checkbox"
      :model-value="[2]"
      :props="{
        button: true
      }"
      :options="optionsLoader">
    </XField>
    <XField
      label="字段名称"
      error="错误信息"
      label-width="100px"
      editor="radio"
      :props="{
        button: true
      }"
      :options="optionsLoader">
    </XField>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { XField } from '@vtj/ui';
  import { ElInput } from 'element-plus';

  const fieldValue = ref('');

  const onChange = (val: any) => {
    console.log('onChange', val);
  };

  const onFocus = () => {
    console.log('onFocus');
  };

  const onBlur = () => {
    console.log('onBlur');
  };

  const options: any = ref([
    { label: '选项一', value: 1 },
    { label: '选项二', value: 2, disabled: true },
    { label: '选项三', value: 3 },
    { label: '选项四', value: 4 }
  ]);

  const optionsLoader = () => {
    return new Promise<any>((resolve) => {
      setTimeout(() => {
        resolve(options.value);
      }, 0);
    });
  };
</script>

输入框类型 ​

Number
日期
日期时间
时间
投票
开关
滑块
级联

<template>
  <div class="page">
    <XField label="Number" editor="number"> </XField>
    <XField label="日期" editor="date"> </XField>
    <XField label="日期时间" editor="datetime"> </XField>
    <XField label="时间" editor="time" width="400px"> </XField>
    <XField label="投票" editor="rate"> </XField>
    <XField label="开关" editor="switch"> </XField>
    <XField label="滑块" editor="slider"> </XField>
    <XField label="级联" editor="cascader" :options="TreeData"> </XField>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { XField } from '@vtj/ui';

  const TreeData = ref([
    {
      value: 'guide',
      label: 'Guide',
      children: [
        {
          value: 'disciplines',
          label: 'Disciplines',
          children: [
            {
              value: 'consistency',
              label: 'Consistency'
            },
            {
              value: 'feedback',
              label: 'Feedback'
            },
            {
              value: 'efficiency',
              label: 'Efficiency'
            },
            {
              value: 'controllability',
              label: 'Controllability'
            }
          ]
        },
        {
          value: 'navigation',
          label: 'Navigation',
          children: [
            {
              value: 'side nav',
              label: 'Side Navigation'
            },
            {
              value: 'top nav',
              label: 'Top Navigation'
            }
          ]
        }
      ]
    },
    {
      value: 'component',
      label: 'Component',
      children: [
        {
          value: 'basic',
          label: 'Basic',
          children: [
            {
              value: 'layout',
              label: 'Layout'
            },
            {
              value: 'color',
              label: 'Color'
            },
            {
              value: 'typography',
              label: 'Typography'
            },
            {
              value: 'icon',
              label: 'Icon'
            },
            {
              value: 'button',
              label: 'Button'
            }
          ]
        },
        {
          value: 'form',
          label: 'Form',
          children: [
            {
              value: 'radio',
              label: 'Radio'
            },
            {
              value: 'checkbox',
              label: 'Checkbox'
            },
            {
              value: 'input',
              label: 'Input'
            },
            {
              value: 'input-number',
              label: 'InputNumber'
            },
            {
              value: 'select',
              label: 'Select'
            },
            {
              value: 'cascader',
              label: 'Cascader'
            },
            {
              value: 'switch',
              label: 'Switch'
            },
            {
              value: 'slider',
              label: 'Slider'
            },
            {
              value: 'time-picker',
              label: 'TimePicker'
            },
            {
              value: 'date-picker',
              label: 'DatePicker'
            },
            {
              value: 'datetime-picker',
              label: 'DateTimePicker'
            },
            {
              value: 'upload',
              label: 'Upload'
            },
            {
              value: 'rate',
              label: 'Rate'
            },
            {
              value: 'form',
              label: 'Form'
            }
          ]
        },
        {
          value: 'data',
          label: 'Data',
          children: [
            {
              value: 'table',
              label: 'Table'
            },
            {
              value: 'tag',
              label: 'Tag'
            },
            {
              value: 'progress',
              label: 'Progress'
            },
            {
              value: 'tree',
              label: 'Tree'
            },
            {
              value: 'pagination',
              label: 'Pagination'
            },
            {
              value: 'badge',
              label: 'Badge'
            }
          ]
        },
        {
          value: 'notice',
          label: 'Notice',
          children: [
            {
              value: 'alert',
              label: 'Alert'
            },
            {
              value: 'loading',
              label: 'Loading'
            },
            {
              value: 'message',
              label: 'Message'
            },
            {
              value: 'message-box',
              label: 'MessageBox'
            },
            {
              value: 'notification',
              label: 'Notification'
            }
          ]
        },
        {
          value: 'navigation',
          label: 'Navigation',
          children: [
            {
              value: 'menu',
              label: 'Menu'
            },
            {
              value: 'tabs',
              label: 'Tabs'
            },
            {
              value: 'breadcrumb',
              label: 'Breadcrumb'
            },
            {
              value: 'dropdown',
              label: 'Dropdown'
            },
            {
              value: 'steps',
              label: 'Steps'
            }
          ]
        },
        {
          value: 'others',
          label: 'Others',
          children: [
            {
              value: 'dialog',
              label: 'Dialog'
            },
            {
              value: 'tooltip',
              label: 'Tooltip'
            },
            {
              value: 'popover',
              label: 'Popover'
            },
            {
              value: 'card',
              label: 'Card'
            },
            {
              value: 'carousel',
              label: 'Carousel'
            },
            {
              value: 'collapse',
              label: 'Collapse'
            }
          ]
        }
      ]
    },
    {
      value: 'resource',
      label: 'Resource',
      children: [
        {
          value: 'axure',
          label: 'Axure Components'
        },
        {
          value: 'sketch',
          label: 'Sketch Templates'
        },
        {
          value: 'docs',
          label: 'Design Documentation'
        }
      ]
    }
  ]);
</script>

API ​

属性 ​

属性名说明类型默认值
name字段名称string-
label字段标题文本string-
editor编辑器组件string | objecttext
props编辑器组件参数object-
modelValue字段值string | number | boolean | object | array-
size输入框尺寸string-
width输入框宽度string | number-
tooltipMessage是否在tooltip显示校验信息boolean \ object-
tooltipPositiontooltip信息显示相对输入框的位置string <inner | outer> | numberouter
placeholder输入框占位文本string-
disabled禁用boolean-
readonly只读boolean-
options选项数据array | function-
visible是否显示控制boolean | object | functiontrue
cascader级联字段，根据字段值变化刷新optionsstring | array-
error校验错误信息string-
tip提示文本string-
inline表单项内容采用inline布局boolean-
labelWidth字段标题文本宽度string | number-
required是否为必填字段booleanfalse
rules校验规则objectfalse
error错误信息string
show-message是否显示校验错误信息booleanfalse
inline-message是否在行内显示校验信息booleanfalse

事件 ​

名称说明参数
change输入值改变时触发value
focus输入框获取焦点时触发-
blur输入框失去焦点时触发

插槽 ​

插槽名说明类型
editor编辑器类型-

暴露 ​

名称说明类型
fieldValue输入框的值-
itemRef输入框ref-
editorRef编辑器ref-
focus--
blur--

Released under the MIT License.

Copyright © 2024-present VTJ.PRO