为Element Plus封装业务组件FormDialog，将所有需要填写表单的弹窗组件封装，方便快速配置

使用FormDialog组件能够对表单弹窗进行快速配置，不用每次单独写弹窗表单业务组件，快速实现表单弹窗业务功能。

调用页面demo.vue

 validateRules.js引用

 
<template>
  <el-button
    link
    type="primary" @click="formDialogRef.open()"
  >
    测试表单窗口
  el-button>
  <FormDialog
    ref="formDialogRef" title="测试"
    :confirm="withdrawDialog.confirm" width="480"
    @visible-change="withdrawDialog.handleVisibleChange"
  >
    <el-form
      ref="ruleFormRef"
      :model="withdrawDialog.form"
      :rules="withdrawDialog.rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="pointName">
        <el-input v-model="withdrawDialog.form.pointName" maxlength="50" />
      el-form-item>
    el-form>
  FormDialog>
template>

 FormDialog/index.vue

useDialog.js引用

 
<template>
  <el-dialog
    v-model="dialog.visible.value"
    :title="dialog.title.value"
    class="form-dialog"
    :before-close="dialog.handleClose"
    align-center
    :style="{ width: width ? (width.includes('px') ? width : `${width}px`) : null }"
  >
    <slot />
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="!hideCancel && cancel.show" auto-insert-space @click="dialog.visible.value = false">取消el-button>
        <el-button
          v-if="confirm.show || confirm.show === undefined"
          :disabled="confirm.disabled"
          type="primary" auto-insert-space @click="handleConfirmClick"
        >确认el-button>
      span>
    template>
  el-dialog>
template>
 
<style lang="scss">
  .form-dialog {
    .el-dialog__body{
      width: 100%;
    }
  }
style>