在el-dialog的基础上封装状态修改弹窗

弹窗封装

<!--
  @name:通用修改状态弹窗
  @description:通用修改状态弹窗，如：启用、停用等，可自定义标题，按钮，提示语
  @author: wjl 
  @date 2024-09-13 14:12:00
-->
<template>
  <div class="status_modal" v-if="visible">
    <el-dialog :title="title" :visible.sync="visible" width="30%" append-to-body custom-class="status-modal-dialog">
      <!-- 提示语 -->
      <div v-if="isTip" class="tip">{{ tip }}</div>

      <div class="content_box">
        <template v-if="iconVisible">
          <i v-if="iconType == 'warning'" class="el-icon-warning" style="color: #f59a23;font-size: 20px;"></i>
          <i v-if="iconType == 'error'" class="el-icon-error" style="color: #f57171;font-size: 20px;"></i>
          <i v-if="iconType == 'success'" class="el-icon-success" style="color: #6cc440;font-size: 20px;"></i>
          <i v-if="iconType == 'info'" class="el-icon-info" style="color: #909399;font-size: 20px;"></i>
        </template>
        <span class="content">确认要将选择数据{{ btnText }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确定{{ btnText }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'StatusModal',
  data () {
    return {
    }
  },
  props: {
    // 显示隐藏控件
    visible: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    // 标题
    title: {
      type: String,
      default: () => {
        return '操作确认'
      },
    },
    // 是否展示tip提示语
    isTip: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    // tip提示语
    tip: {
      type: String,
      default: () => {
        return '提示：1. 科室停用后，新患者、用户不可以添加此科室。2. 用户需要移出此科室'
      },
    },
    // 按钮文字
    btnText: {
      type: String,
      default: () => {
        return '确定'
      },
    },
    // icon图标是否显示
    iconVisible: {
      type: Boolean,
      default: () => {
        return true
      },
    },
    // icon图标类型 可接收warning error success info四个值
    iconType: {
      type: String,
      default: () => {
        return 'warning'
      },
    },
  },
  methods: {
    // 点击关闭按钮
    handleClose () {
      this.$emit('update:visible', false)
    },
    // 点击确认按钮
    handleConfirm () {
      this.$emit('confirm')
    },
  },
}
</script>

<style lang="scss" scoped>
.content_box {
  display: flex;
  align-items: center;
  padding: 30px 20px;

  .content {
    color: #000;
    font-size: 16px;
    margin-left: 6px;
  }
}

.tip {
  background-color: #fff5ed;
  color: #333333;
  padding: 5px 15px;
  font-size: 14px;

}
</style>
<!-- 自定义dialog样式 -->
<style lang="scss">
.status-modal-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);

  .el-dialog__body {
    flex: 1;
    overflow: auto;
    padding: 0 !important;
  }

  .el-dialog__header {
    padding: 15px 15px 15px;
    background-color: #ebecf1;
  }
}
</style>

使用

    <!-- 状态修改模态框  iconType 可传递 warning error success info 四个值 -->
    <StatusModal v-if="visible" :visible.sync="visible" title="操作确认" :btnText="btnText" :isTip="true" iconType="warning"
      :iconVisible="true" @confirm="handleConfirm" />



  data () {
    return {

      // 是否显示modal框
      visible: false,
      // 按钮文字
      btnText: '停用'
    };
  },

    // modal模态框点击确认按钮
    handleConfirm () {
      // 此处调用接口 如果调用的接口不同，传递的值不同则需要自行定义标识 通过判断实现
      console.log(`调用${this.btnText}接口`);
      this.visible = false
    }