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	控制头部和尾部的尺寸	string	default
primary	弹窗主题颜色	boolean	false
formProps	-	object	-
submit	确认按钮	boolean| string	确认
cancel	取消按钮	boolean| string	取消
model	表单模型	object	{}
rules	表单校验规则	object	{}
submitMethod	表单提交处理方法, return true 关闭弹窗	function	-

事件

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

插槽

插槽名	说明	类型
extra	-	-
handle	底部按钮区域	-
footer	-	-

暴露

名称	说明	类型
$vtjEl	组件父元素的ref
formRef	组件内部form表单的ref
dialogRef	弹窗表单组件的ref