VUE：自己写一个消息提示弹框（类似element-ui的message）

程序员文章站 2022-05-30 09:36:22

...

简介

项目中的3D模块操作时，需要提示用户的一些不正确操作，但是又想多一个不再提示的按钮。百度资料并仿照element-ui的message消息提示，写了一个组件方法，效果图如下。
VUE：自己写一个消息提示弹框（类似element-ui的message）

具体实现

1.新建一个vue文件，用来写提示框的样式，如notifyMessage.vue

<template>
  <transition name="slide-fade">
    <div class="my-notify"
         v-if="notifyFlag">
      <div class="notify success"
           v-if="type=='success'">
        <i class="el-icon-success"></i>
        <span class="content"> {{content}}</span>
        <div v-if="noNotifyBtn"
             class="noNotifyAgain">
          <span @click="noAgainFun">{{noRemind}}</span>
        </div>
      </div>
      <div class="notify message"
           v-else-if="type=='message'">
        <i class="el-icon-info"></i>
        <span class="content">{{content}}</span>
        <div v-if="noNotifyBtn"
             class="noNotifyAgain">
          <span @click="noAgainFun">{{noRemind}}</span>
        </div>
      </div>
      <div class="notify error"
           v-else-if="type=='error'">
        <i class="el-icon-error"></i>
        <span class="content">{{content}}</span>
        <div v-if="noNotifyBtn"
             class="noNotifyAgain">
          <span @click="noAgainFun">{{noRemind}}</span>
        </div>
      </div>
      <div class="notify warning"
           v-else-if="type=='warning'">
        <i class="el-icon-warning"></i>
        <span class="content">{{content}}</span>
        <div v-if="noNotifyBtn"
             class="noNotifyAgain">
          <span @click="noAgainFun">{{noRemind}}</span>
        </div>
      </div>
      <!-- 可以简写如下 -->
      <!-- <div class="notify"
           :class="[type === 'success' ? 'success' : (type === 'error' ? 'error' : (type === 'warning' ? 'warning' : 'message')), noNotifyBtn ? 'notifyPadding' : '']">
        <i :class="[type === 'success' ? 'el-icon-success' : (type === 'error' ? 'el-icon-error' : (type === 'warning' ? 'el-icon-warning' : 'el-icon-info'))]"></i>
        <span class="content"> {{content}}</span>
        <div v-if="noNotifyBtn"
             class="noNotifyAgain">
          <span @click="noAgainFun">{{noRemind}}</span>
        </div>
      </div> -->
    </div>
  </transition>
</template>

<script>
export default {
  name: 'notifyMessage',
  props: {},
  components: {},
  data () {
    return {
      noRemind: 'Dont remind again'
    }
  },
  created () { },
  mounted () { },
  watch: {},
  computed: {},
  methods: {
    noAgainFun () {
      sessionStorage.setItem('dontRemindAgain', '1')
    }
  }
}
</script>

<style lang="less" scoped>
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
.notify-wrap {
  background-color: #edf2fc;
}
.my-notify {
  margin: 10px;
  width: 500px;
}
.notify {
  padding: 15px 15px;
  border-radius: 4px;
  background-color: rgb(255, 244, 224);
  box-shadow: -5px 5px 12px 0 rgba(204, 204, 204, 0.8);
  animation: show cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
  i {
    font-size: 16px;
    font-weight: 600;
    margin-right: 5px;
  }
  .content {
    font-size: 14px;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 20px;
  }
}
.notifyPadding {
  padding: 15px 15px 10px 15px;
}
.message {
  background-color: #edf2fc;
  i,
  .content {
    color: #909399;
  }
}
.success {
  background-color: #f0f9eb;
  i,
  .content {
    color: #67c23a;
  }
}
.error {
  background-color: #fef0f0;
  i,
  .content {
    color: #f56c6c;
  }
}
.warning {
  background-color: #fdf6ec;
  i,
  .content {
    color: #e6a23c;
  }
}
.noNotifyAgain {
  width: 100%;
  text-align: right;
  span {
    font-size: 12px;
    color: rgb(204, 201, 201);
    border-bottom: 1px solid rgb(204, 201, 201);
    cursor: pointer;
    &:hover {
      color: #001a70;
      border-bottom: 1px solid #001a70;
    }
  }
}
@keyframes show {
  0% {
    right: -350px;
  }
  100% {
    right: 10px;
  }
}
</style>

2.再新建一个js文件，用来写提示框的使用方法，如notifyMessageJs.js

import vue from 'vue'
import myNotify from '@/core/components/notifyMessage'
// 创建vue组件实例
const NOTIFY = vue.extend(myNotify)
// 添加通知节点(用来存放通知的元素)
let notifyWrap = document.createElement('div')
notifyWrap.className = 'notify-wrap'
notifyWrap.style = 'position: fixed;right:calc(50vw - 250px);top: 100px; transition-duration: .5s;z-index: 5;'
document.body.appendChild(notifyWrap)
let myMsg = {
  /**
   * 通知框
   * @content 提示内容;
   * @type 提示框类型，parameter： success，error，warning
   * @time 显示时长
   * @noNotifyBtn 是否显示 不再提示 的按钮
   */
  notify: ({
    content,
    type,
    time,
    noNotifyBtn
  }) => {
    if (sessionStorage.getItem('dontRemindAgain')) {
      return
    }
    // 创建一个存放通知的div
    const NOTIFYDOM = new NOTIFY({
      el: document.createElement('div'),
      data() {
        return {
          notifyFlag: true, // 是否显示
          time: time || 3000, // 取消按钮是否显示
          content: content, // 文本内容
          type: type || 'message', // 类型
          noNotifyBtn: noNotifyBtn, // 不再提示的按钮是否显示
          timer: '',
          timeFlag: false
        }
      },
      watch: {
        timeFlag() {
          if (this.timeFlag) {
            this.notifyFlag = false // 销毁div渲染
            window.clearTimeout(this.timer) // 清除计时器
          }
        }
      },
      created() {
        this.timer = setTimeout(() => {
          this.timeFlag = true // 时间到了，就变为true
        }, this.time)
      },
      beforeDestroy() {
        window.clearTimeout(this.timer)
      }
    })
    // 往notifyWrap里面添加通知
    notifyWrap.appendChild(NOTIFYDOM.$el)
  }
}
// 注册
function register() {
  vue.prototype.$myMsg = myMsg  // 暴露出去的方法名
}
export default {
  myMsg,
  register
}

3.在main.js中进行全局注册

import notifyMessage from '@/core/components/notifyMessageJs'

Vue.use(notifyMessage.register)

4.使用说明

1.属性（属性名 | type | 是否必传 | 说明 | 默认值）
content | String | 是 | 提示框的内容
type | String | 否 | 提示框的类型 | message | 可选值有：message success error warning
noNotifyBtn | Boolean | 否 | 是否显示不再提示按钮 | false
time | Number | 否 | 提示框的显示时间 | 3000

2.示例
(1)在自己的vue项目中

this.$myMsg.notify({ content: '这里是内容', type: 'warning', noNotifyBtn: false, time: 3000 })

(2)其他项目模块

import notifyMessageJs from '@/core/components/notifyMessageJs

notifyMessageJs.myMsg.notify({ content: '这里是内容', type: 'message', noNotifyBtn: true, time: 3000 })

注意

当前提示框宽度是固定的，因为在出来的时候，js中进行的添加div元素进行的定位，如果有好的处理方法的朋友，期望交流，谢谢！

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！