VUE：自己写一个消息提示弹框（类似element-ui的message）
简介
项目中的3D模块操作时，需要提示用户的一些不正确操作，但是又想多一个不再提示的按钮。百度资料并仿照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： message，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项目中
(2)其他项目模块this.$myMsg.notify({ content: '这里是内容', type: 'warning', noNotifyBtn: false, time: 3000 })import notifyMessageJs from '@/core/components/notifyMessageJs notifyMessageJs.myMsg.notify({ content: '这里是内容', type: 'message', noNotifyBtn: true, time: 3000 })
注意
当前提示框宽度是固定的，因为在出来的时候，js中进行的添加div元素进行的定位，如果有好的处理方法的朋友，期望交流，谢谢！
最后
觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！