ElementUI通知功能Notification和MessageBox踩坑

最新推荐文章于 2025-10-05 08:01:21 发布

原创最新推荐文章于 2025-10-05 08:01:21 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #annotations

Vue2.x 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何通过Vue的通知组件自定义样式及DOM结构。通过不使用scope并利用customClass属性，实现样式覆盖；同时借助Vue的createElement方法创建自定义DOM元素。

1.样式修改

很多小伙伴会发现，不管是less种的**/deep/还是scss**中的::v-deep都无法直接修改以上两种功能的底层样式，导致无法修改样式的原因在这里，关键字——scope。

在这里插入图片描述

那么如何修改样式？

新建style标签，不要给style添加scope,利用官方文档中的customClass属性，给Notification 加上类名，保证组件样式唯一，配合内置的类型即可进行样式修改。
样式的修改多样化，既可以通过添加class类名进行修改，也可以直接在style对象中直接添加样式。
完整代码在最下面。

在这里插入图片描述

2.调用方法以及DOM结构修改

利用Vue中的createElement 参数进行DOM元素的创建。

直接上完整版代码。

<template>
  <div class="contain"></div>
</template>
<script>
export default {
  data() {
    return {
      notifyArr: [],
      Data: [{ content: 'QQQQQ' }],
    };
  },
  created() {
    this.messageNotice();
  },
  methods: {
    messageNotice() {
      const ele = this.$createElement;
      this.Data.forEach((item) => {
        let notifySolo = this.$notify({
          title: '系统维护公告',
          message: ele(
            'div',
            {
              style: 'width: 100%;height:180px; position: relative;',
            },
            [
              ele(
                'div',
                {
                  class: 'notifyContent',
                },
                item.content
              ),
              ele(
                'el-button',
                {
                  class: 'notifyButton',
                  type: 'primary',
                  on: {
                    click: this.iKnowHandler,
                  },
                },
                '知道了'
              ),
            ]
          ),
          duration: 0,
          customClass: 'notify',
          position: 'bottom-right',
          showClose: false,
        });
        this.notifyArr.push(notifySolo);
      });
    },
    iKnowHandler() {
      this.notifyArr[0].close();
    },
  },
};
</script>

<style lang="less" scoped></style>
<style lang="scss">
// ::v-deep .el-notification.right {
//   padding: 0;
// }
// 提醒样式
.notify {
  background: #32353b;
  border: 1px solid #313d4f;
  border-radius: 4px;
  width: 370px;
  padding: 0;
  .notifyContent {
    font-size: 14px;
    color: #ffffff;
    width: 370px;
    height: 60px;
    padding: 24px;
  }
  .notifyButton {
    background: #4880ff;
    border-radius: 4px;
    width: 92px;
    height: 38px;
    color: #ffffff;
    position: absolute;
    right: 0px;
    bottom: 0px;
    margin: 24px;
    border: none;
  }
  .el-notification__group {
    margin-left: 0;
    .el-notification__title {
      font-size: 18px;
      color: #ffffff;
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 24px;
      border-bottom: 1px solid #636971;
    }
  }
}
</style>