【封装成组件使用】ElementUI-Dialog标题添加图标，自定义图标及文字内容_el-dialog弹窗中如何在关闭按钮旁边加一个icon图标

需求弹框：三个不同状态下的弹框，需要使用自定义图标以及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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

script 标签中引用

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

methods方法中，调出状态框

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

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