Vue3 封装Element-plus Dialog组件

最新推荐文章于 2024-05-20 20:00:00 发布

米方

最新推荐文章于 2024-05-20 20:00:00 发布

阅读量554

点赞数

分类专栏： vue3 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_38233449/article/details/129833015

版权

vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

BaseDialog.vue

<template>
  <div class="lz-dialog">
    <el-dialog
      v-model="dialogShow"
      :title="obj.dialogTitle"
      :width="obj.dialogWidth"
      :before-close="close"
      :close-on-click-modal="false"
      draggable
    >
      <slot></slot>
      <template #footer>
        <span v-if="obj.dialogIsFooter" class="dialog-footer">
          <el-button class="btn-mixins-clear-default" @click="close">{{
            obj.dialogCloseBtnText
          }}</el-button>
          <el-button
            class="btn-mixins dia-suc"
            @click="success"
            type="primary"
            >{{ obj.dialogSuccessBtnText }}</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, defineEmits, defineProps } from "vue";

const props = defineProps({
  dialogObject: {
    default() {
      return {};
    },
    type: Object,
  },
});
const emit = defineEmits(["dialogSuccess", "dialogClose"]);

const dialogShow = computed({
  get: () => props.dialogObject?.dialogVisible,
  set: (val) => val,
});

const obj = {
  dialogTitle: props.dialogObject?.title || "标题",
  dialogWidth: props.dialogObject?.width || "30%",
  dialogCloseBtnText: props.dialogObject?.closeBtnText || "取消",
  dialogSuccessBtnText: props.dialogObject?.successBtnText || "成功",
  dialogIsFooter: props.dialogObject?.isFooter || false,
};

const close = () => {
  emit("dialogClose", false, "close");
};
const success = () => {
  emit("dialogSuccess", false, "success");
};
</script>
<style lang="scss">
.lz-dialog {
  .dia-suc {
    margin-left: 16px !important;
  }
}
</style>

使用

<BaseDialog
  :dialog-object="dialogObjDelDef"
  @dialogClose="dialogCloseDef"
  @dialogSuccess="dialogSuccessDef"
>
  <el-form :model="dialogObjDelDef.form">
    <el-form-item
      :label="dialogObjDelDef.form.label"
      :label-width="formLabelWidth"
    >
      <el-select
        v-model="dialogObjDelDef.form.period"
        :placeholder="dialogObjDelDef.form.placeholder"
      >
        <el-option
          :label="item.label"
          :value="item.value"
          v-for="item in dialogObjDelDef.form.periodOption"
          :key="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</BaseDialog>



const dialogObjDelDef = reactive({

    form: {
        periodOption:{}
    }
})