vue-element-admin框架 通用弹窗封装、信息确认框封装、滚动条优化（三）

通用弹窗封装

展示：

新建文件

src/components/dialog/SysDialog.vue

<template>
  <el-dialog
    top="5vh"
    :title="title"
    :visible.sync="visible"
    :width="width + 'px'"
    :before-close="onClose"
    :close-on-click-modal="false"
  >
    <div class="containner" :style="{ height: height + 'px' }">
      <slot name="content"></slot>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="danger" @click="onClose">取消</el-button>
      <el-button type="primary" @click="onConfirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 600,
    },
    height: {
      type: Number,
      default: 250,
    },
  },
  methods: {
    onClose() {
      this.$emit("onClose");
    },
    onConfirm() {
      this.$emit("onConfirm");
    },
  },
};
</script>

<style lang="scss" scoped>
.containner {
  overflow-x: initial;
  overflow-y: auto;
}
.el-dialog__wrapper {
  ::v-deep .el-dialog {
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    .el-dialog__header {
      border-top-left-radius: 7px !important;
      border-top-right-radius: 7px !important;
      background-color: #1890ff;
      .el-dialog__title {
        color: #fff;
        font-size: 15px;
        font-weight: 700;
      }
      .el-dialog__close {
        color: #fff;
      }
    }
    .el-dialog__body {
      padding: 10px 10px !important;
    }
    .el-dialog__footer {
      border-top: 1px solid #e8eaec !important;
      padding: 10px !important;
    }
  }
}
</style>

新建department.vue组件，然后引入SysDialog.vue组件，并注册SysDialog组件

<template>
  <div>
   <sys-dialog
      :title="addDialog.title"
      :visible="addDialog.visible"
      :width="addDialog.width"
      :height="addDialog.height"
      @onClose="onColse"
      @onConfirm="onConfirm"
    >
      <div slot="content">弹框内容</div>
    </sys-dialog>
  </div>
</template>

<script>
import SysDialog from "@/components/system/SysDialog";
export default {
  components: { 
      SysDialog 
  },
  data(){
      return{
          addDialog: {
        title: "新增部门",
        visible: false,
        width: 600,
        height: 250,
      },
      }
  },
  methods:{
       //弹框取消事件
    onColse() {
      this.addDialog.visible = false;
    },
    //弹框确认事件
    onConfirm() {
      this.addDialog.visible = false;
    },
  }
};
</script>

<style lang="scss" scoped>
</style>

滚动条优化

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 5px;
    height: 5px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 8px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #c8c8c8;
  }

信息确认框封装

在utils里面新建myconfirm.js

import { MessageBox, Message } from 'element-ui'
//删除弹框
export default function myconfirm(text) {
    return new Promise((resolve, reject) => {
        MessageBox.confirm(text, '系统提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            resolve(true)
        }).catch(() => {
            Message.warning('已取消')
            reject(false)
        })
    }).catch(() => {
        // 可对错误进行处理
    })
}

在main.js中挂载到vue上

import myconfirm from '@/utils/myconfirm'
Vue.prototype.$confirm = myconfirm;```

#### 使用

```bash
let confirm = await this.$confirm('确认删除该数据吗?')