当前位置:   article > 正文

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

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/86095
推荐阅读
相关标签
  

闽ICP备14008679号