【封装成组件使用】ElementUI-Dialog标题添加图标，自定义图标及文字内容

需求弹框：三个不同状态下的弹框，需要使用自定义图标以及element dialog弹框调整样式

1.在项目里 components文件下 新建dialog文件夹

弹框代码：

<template>
  <div class="tipsDialog">
    <div
      :class="
        title === 'Success'
          ? 'successDialog'
          : title === 'Eror'
          ? 'erorDialog'
          : 'alertDialog'
      "
    >
      <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :width="width + 'px'"
        :visible.sync="visible"
        :show-close="false"
      >
        <div slot="title" class="dialog-header-title">
          <svg-icon
            :icon-class="
              title === 'Success'
                ? 'success'
                : title === 'Eror'
                ? 'eror'
                : 'alert'
            "
          />
          <!-- <svg-icon icon-class="success" /> -->
          <span class="s-title">{{ title }}</span>
        </div>
        <div class="app-container">OK :orderNo 123456</div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" :type="buttonType(title)" @click="clickOk()">
            Confirm
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import elDragDialog from "@/utils/directive/el-dragDialog";
export default {
  name: "pro-dialog",
  directives: {
    elDragDialog,
  },
  props: {
    title: {
      type: String,
      default: "Success",
    },
    width: {
      type: Number,
      default: 345,
    },
    content: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    buttonType(val) {
      if (val == "Success") {
        return "primary";
      } else if (val == "Eror") {
        return "danger";
      } else {
        return "info";
      }
    },
    visibleHandle() {
      this.visible = !this.visible;
    },
    clickOk() {
      this.$emit("clickOk");
    },
  },
};
</script>

<style lang="scss" >
.tipsDialog {
  .erorDialog {
    .el-dialog__header {
      background-color: #fe0100 !important;
    }
  }
  .alertDialog {
    .el-dialog__header {
      background-color: #ebd70a !important;
    }
  }
  .successDialog {
    .el-dialog__header {
      background-color: #409e2a !important;
    }
  }
  .dialog-header-title {
    color: #ffffff;
    display: flex;
    align-items: center;
  }
  .s-title {
    font-size: 20px;
    padding-left: 15px;
  }
  .el-button--primary {
    background: #409e2a;
    border-color: #409e2a;
  }
  .el-button--info {
    background-color: #ebd70a;
    border-color: #ebd70a;
  }
  .app-container {
    color: #ffffff;
    text-align: center;
  }
}
</style>

2.将弹框中用的小图标引入到项目中（设计给的是svg图标哈）

三个状态图标的名称分别是：success.svg，eror.svg，alert.svg

3.页面中引用

代码：

<template>
  <div class="app-container">
    <div class="head-container">
      <crudOperation :permission="permission" />
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :header-cell-style="{ color: '#FFF', background: '#333' }"
      :cell-style="{ color: '#FFF', background: '#333' }"
      :data="crud.data"
      style="width: 100%"
      :row-key="getRowKey"
      @selection-change="crud.selectionChangeHandler"
      :default-sort="{ prop: '', order: '' }"
      @sort-change="sortChange"
    >
      <template slot="empty">
        <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
      </template>
      <el-table-column
        prop="partNumber"
        :sortable="true"
        :label="$t('solderPasteManager.pn')"
      />
      <el-table-column
        prop="stockCount"
        :sortable="true"
        :label="$t('tacticsOuput.numberDiscs')"
      />
      <el-table-column
        :label="$t('storagePos.operation')"
        align="center"
        fixed="right"
        width="130"
      >
        <template slot-scope="scope" align="center">
          <el-button
            size="mini"
            type="primary"
            @click="onCreateOrder(scope.$index, scope.row)"
          >
            create Order</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next,sizes"
      :total="crud.data.length"
    >
    </el-pagination>
    <el-dialog
      v-el-drag-dialog
      :title="$t('Storage.detail')"
      :visible="detailVisible"
      :before-close="close"
      v-if="detailVisible"
      width="35%"
      :close-on-click-modal="false"
    >
      <div class="app-container">
        <el-form
          ref="form"
          :inline="true"
          :model="detailForm"
          size="small"
          label-width="150px"
        >
          <el-form-item :label="$t('orderName.pn')" style="width: 380px">
            {{ detailForm.partNumber }}</el-form-item
          >
          <el-form-item :label="$t('orderName.numberDiscs')">
            {{ detailForm.stockCount }}</el-form-item
          >
          <el-form-item :label="$t('orderName.amount')">
            <el-input v-model="detailForm.amount" style="width: 300px" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-tickets"
          size="mini"
          type="primary"
          @click="onTriggerMatReqOrder()"
        >
          TriggerMatReqOrder
        </el-button>
      </div>
    </el-dialog>
    <!-- 状态弹框 -->
    <statusTipsdialog ref="tipsDialog" title="Success" content="OK :orderNo 123456"
      @clickOk="clickOk()"/>
  </div>
</template>

script 标签中引用

<script>
import statusTipsdialog from "@/components/dialog/statusTipsdialog";
  components: { statusTipsdialog },
</script>

methods方法中，调出状态框

点击详情弹框中的按钮，调用状态弹框

    onTriggerMatReqOrder() {
      if (this.detailForm.amount * 1 > this.detailForm.stockCount * 1) {
        this.$refs.tipsDialog.visibleHandle();//调用弹框出现方法
      }
    },
      // 关闭状态提示框
    clickOk() {
      this.$refs.tipsDialog.visibleHandle();
    },