【无标题】使用element UI el-dialog封装全局公用弹框

使用element UI el-dialog封装全局公用弹框

在src下面的components新建文件夹TemplateDialog包含index文件

<template>
  <!-- 封装弹框 -->
  <div class="popup">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col :span="4">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node }" class="custom-tree-node">
              <el-tooltip
                class="item"
                effect="dark"
                :content="node.label"
                placement="top-start"
              >
                <span> {{ node.label | ellipsis(10) }} </span>
              </el-tooltip>
            </span>
          </el-tree>
        </el-col>
        <el-col :span="20">
          <div
            style="
              width: 100%;
              height: 70vh;
              display: flex;
              align-items: center;
              overflow: hidden;
            "
          >
            <img :src="pdfUrl" alt="" style="width: 100%" />
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    defaultProps: {
      type: Object,
      default: () => ({
        children: "childRen",
        label: "label",
      }),
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    defaultExpandAll: {
      type: Boolean,
      default: () => false,
    },
    dialogTitle: {
      type: String,
      default: "标题",
    },
    pdfUrl: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    popupWidth: {
      type: String,
      default: "550px",
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
        this.$emit("updateVisible", val);
      },
    },
  },
  methods: {
    Cancel() {
      this.$emit("resetPopupData");
    },
    Save() {
      this.$emit("submitPopupData");
    },
    handleClose() {
      this.$emit("handleClose");
    },
    handleNodeClick(data) {
      this.$emit("nodeClick", data);
    },
  },
};
</script>

<style lang="less"></style>

封装之后使用方法 在需要的文件引用

import TemplateDialog from "@/components/TemplateDialog/index";
export default {
  name: "Romcd",
  components: { TemplateDialog },
  data() {
    return {}

页面使用

<TemplateDialog
      :visible.sync="dialogVisible"
      :dialogTitle="dialogTitle"
      @handleClose="handleClose"
      :tree-data="treeData"
      @nodeClick="handleNodeClick"
      :pdfUrl="pdfUrl"
    >
    </TemplateDialog>