XDialogForm 对话框表单

示例用法

基础用法

<template>
  <div>
    <ElButton @click="visible1 = true">Open dialog1 </ElButton>
    <ElButton @click="visible2 = true">Open dialog2 </ElButton>
    <XDialogForm
      v-model="visible1"
      primary
      title="弹窗表单"
      size="default"
      :form-props="{ labelWidth: '100px' }"
      :model="model"
      :rules="rules"
      @submit="onSubmit"
      :submit-method="submitMethod">
      <XField label="标题" name="title"></XField>
      <XField label="我的内容" name="content" editor="select"></XField>
    </XDialogForm>

    <XDialogForm
      v-model="visible2"
      title="弹窗表单 size: large"
      size="large"
      :form-props="{ labelWidth: '120px' }"
      :model="model"
      :rules="rules"
      @submit="onSubmit"
      :submit-method="submitMethod">
      <XField label="标题" name="title"></XField>
      <XField
        label="我的内容"
        name="content"
        editor="select"
        :options="options"></XField>
    </XDialogForm>
  </div>
</template>

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

  const visible1 = ref(false);
  const visible2 = ref(false);

  const rules = {
    title: [{ required: true, message: '我是必填项' }]
  };

  const model = {
    title: 'abc',
    content: '111'
  };

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

  const onSubmit = (m: any) => {
    console.log('submit', m);
  };

  const submitMethod = async (m: any) => {
    console.log('submitMethod', m);
    return true;
  };
</script>

<style scoped></style>

插槽用法

<template>
  <div>
    <ElButton @click="visible1 = true">extra-handle 插槽 </ElButton>
    <ElButton @click="visible2 = true">footer 插槽 </ElButton>
    <XDialogForm
      v-model="visible1"
      title="弹窗表单"
      size="default"
      :form-props="{ labelWidth: '100px' }"
      :model="model"
      :rules="rules"
      @close="onClose"
      @submit="onSubmit"
      :submit-method="submitMethod">
      <XField label="标题" name="title"></XField>
      <XField
        label="我的内容"
        name="content"
        editor="select"
        :options="options"></XField>

      <template #extra>
        <ElButton type="success">插槽-- extra</ElButton>
      </template>

      <template #handle>
        <ElButton type="success">插槽--handle</ElButton>
      </template>
    </XDialogForm>

    <XDialogForm
      v-model="visible2"
      title="弹窗表单"
      size="default"
      :form-props="{ labelWidth: '100px' }"
      :model="model"
      :rules="rules"
      @close="onClose"
      @submit="onSubmit"
      :submit-method="submitMethod">
      <h1>footer 插槽只能单独使用</h1>

      <template #extra>
        <ElButton type="success">插槽-- extra</ElButton>
      </template>

      <template #handle>
        <ElButton type="success">插槽--handle</ElButton>
      </template>

      <template #footer>
        <ElButton type="success">插槽--footer</ElButton>
      </template>
    </XDialogForm>
  </div>
</template>

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

  const visible1 = ref(false);
  const visible2 = ref(false);

  const rules = {
    title: [{ required: true, message: '我是必填项' }]
  };

  const model = {
    title: 'abc',
    content: '111'
  };

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

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

  const onSubmit = (m: any) => {
    console.log('submit', m);
  };

  const submitMethod = async (m: any) => {
    console.log('submitMethod', m);
    return true;
  };
</script>

<style scoped></style>

API

属性

属性名	说明	类型	默认值
modelValue	控制对话框显示状态	boolean	false
size	对话框尺寸（small, default, large）	string	default
primary	是否使用主色调标题背景	boolean	false
formProps	传递给内部表单组件的属性	object	-
submit	确认按钮配置	boolean| string	确认
cancel	取消按钮配置	boolean| string	取消
model	表单数据模型	object	{}
rules	表单验证规则	object	{}
submitMethod	表单提交处理方法（返回true关闭对话框）	function	-

事件

事件名称	说明	参数
submit	确认按钮点击事件	-
close	取消按钮点击事件	-

插槽

插槽名	说明	类型
extra	额外内容区域	-
handle	底部按钮区域	-
footer	整个底部区域	-

暴露API

名称	说明	类型
$vtjEl	组件父元素实例引用	-
formRef	内部表单组件实例引用	-
dialogRef	对话框组件实例引用	-