vue2封装一个以方法调用的弹窗组件

<template>

  <div class="reason-dialog-container" v-if="visible">

    <broadside

      :title="title"

      v-if="editFormUi === 'broadside' && visible"

      :width="width"

      v-model="visible"

      @close="cancel"

    >

      <div slot="content">

        <mingdu-form

          :form-view="formView"

          labelPosition="top"

          :form-data="dialogFormData"

          :columnGap="4"

          autoLayout

          v-bind="formConfigs"

          ref="elform"

          @itemClick="handleFormItemClick"

        >

        </mingdu-form>

      </div>

      <div class="bottom-button" v-if="showFootBtns">

        <el-button @click="cancel">取消</el-button>

        <el-button type="primary" @click="handleConfirm" v-throttle>确定</el-button>

      </div>

    </broadside>

    <el-dialog

      class="form-dialog-body"

      :title="title"

      :width="width"

      v-if="editFormUi === 'dialog' && visible"

      :close-on-click-modal="false"

      :visible.sync="visible"

      :before-close="cancel"

      v-bind="dialogConfigs"

      :close-on-press-escape="false"

      :modal="modal"

    >

      <div class="body-elform" style="height: 100%; width: calc(100% - 15px)">

        <!-- { { dialogFormData }} -->

        <component

          :is="contentComponent"

          v-on="contentOn"

          v-bind="contentProps"

          v-if="contentComponent"

          @confirm="componentConfirm"

        ></component>

        <mingdu-form

          v-else

          v-bind="formConfigs"

          :form-view="formView"

          :form-data="dialogFormData"

          ref="elform"

          @itemClick="formItemClick"

        >&