二次组件化element-puls弹窗

我相信每个项目都会有不同的弹窗样式，需要自己去组件化，这是我的一个封装过程。添加了审核弹窗、提交弹窗、加载按钮 放大缩小等...

通过isEamine loading 改变弹窗累不的按钮在家及样式。

props接受参数 灵活配置：=>

const props = defineProps({
  // 控制弹窗
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 弹窗标题
  title: {
    type: String,
    default: '新增',
  },
  // 弹窗宽度
  width: {
    type: String,
    default: '20%',
  },
  // 提交按钮 || 审核(同意、不同意) 加载 状态
  loading: {
    type: Boolean,
    default: false,
  },
  // 取消弹窗文字
  closeText: {
    type: String,
    default: '取消',
  },
  // 普通提交按钮文字
  okText: {
    type: String,
    default: '保存',
  },
  // 审核按钮文字
  yesText: {
    type: String,
    default: '同意',
  },
  // 审核按钮文字
  noText: {
    type: String,
    default: '不同意',
  },
  // 是否审核按钮
  isEamine: {
    type: Boolean,
    default: false,
  },

  // 是否需要按钮
  isBtn: {
    type: Boolean,
    default: true,
  },
})

html部分

  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :lock-scroll="false"
    :draggable="true"
    :modal="false"
    destroy-on-close
    :width="width"
    append-to-body
    :model-value="modelValue"
    :fullscreen="fullscreen"
    @close="close"
  >
    <template #title>
      <div class="dialog-header">
        <el-icon class="FullScreen pringt" @click="fullscreen = !fullscreen"
          ><FullScreen
        /></el-icon>
        <span class="title">{{ props.title }}</span>

        <!-- <el-icon @click.stop="emit('close')" class="pringt"><Close /></el-icon> -->
      </div>
    </template>
    <div class="line" />
    <slot name="body" class="dialog-body" />
    <slot class="dialog-body" />
    <template #footer v-if="title != '查看'">
      <slot name="footer" v-if="isBtn">
        <span class="dialog-footer">
          <!-- 审核专用 -->
          <template v-if="isEamine">
            <el-button type="danger" :loading="loading" @click="submit(2)">
              {{ noText }}
            </el-button>
            <el-button type="primary" :loading="loading" @click="submit(1)">
              {{ yesText }}
            </el-button>
          </template>
          <!-- 普通按钮 -->
          <template v-else>
            <el-button type="primary" :loading="loading" @click="submit">
              {{ okText }}
            </el-button>
          </template>
          <el-button @click="close">{{ closeText }}</el-button>
        </span>
      </slot>
    </template>
    <div :class="title == '查看' ? 'footer' : 'footer'"></div>
  </el-dialog>

部分

// 子传父
const emit = defineEmits(['update:modelValue', 'close', 'ok'])

// 弹窗是否全屏
const fullscreen = ref(false)

// 保存按钮
const submit = (val) => {
  emit('ok', val)
}

// 取消按钮
const close = () => {
  emit('update:modelValue', false)
  emit('close')
}

scss

<style lang="scss" scoped>
// 空格线
.line {
  width: 100%;
  border-top: 1px solid #dcdfe6;
  margin-bottom: 10px;
}
.title {
  text-align: center;
}
.dialog-footer {
  padding-bottom: 10px;
}
.dialog-body {
  padding-bottom: 20px;
}
.footer {
  height: 1.25rem;
}

.dialog-header {
  display: flex;
}
.dialog-header > .title {
  display: flex;
  justify-content: center;
  flex: 2;
}
.dialog-header > .FullScreen {
  z-index: 99;
  cursor: pointer;
}
</style