vue 自定义注册全局notification消息通知组件
效果图目录结构Notice.vue<template><transition name="notice-fade"><div v-if="visible" :class="wrapClasses"><span class="content"><i v-if="type === 'succe...
·
博客地址:http://www.globm.top/blog/1/detail/26
效果图
目录结构
Notice.vue
<template>
<transition name="notice-fade">
<div v-if="visible" :class="wrapClasses">
<span class="content">
<i v-if="type === 'success'" class="el-icon-success"></i>
<i v-if="type === 'warning'" class="el-icon-warning"></i>
<i v-if="type === 'error'" class="el-icon-error"></i>
<i v-if="type === 'info'" class="el-icon-info"></i>
<span :class="[prefixCls+'-content']">
{{msg}}
</span>
</span>
</div>
</transition>
</template>
<script>
const prefixCls = 'notice'
export default {
name: 'Notice',
data () {
return {
visible: false,
type: 'info',
msg: '',
duration: 1500,
prefixCls: prefixCls
}
},
computed: {
wrapClasses () {
return [`${prefixCls}`, `${prefixCls}-${this.type}`]
}
},
mounted () {
this.setTimer()
},
methods: {
setTimer () {
setTimeout(() => {
this.close() // 3000ms之后调用关闭方法
}, this.duration)
},
close () {
this.visible = false
setTimeout(() => {
this.$destroy()
this.$el.parentNode.removeChild(this.$el) // 从DOM里将这个组件移除
}, 500)
}
}
}
</script>
<style lang="less" scoped>
.notice-fade-enter-active,
.notice-fade-leave-active {
transition: all 0.3s ease;
}
.notice-fade-enter, .notice-fade-leave-to {
transform: translateY(-20px);
opacity: 0;
}
.notice {
background-color: transparent!important;
margin-bottom: 15px;
.content{
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(34, 34, 34, 0.2);
padding: 5px 8px;
display: inline-block;
width: auto;
i{
margin-right: 3px;
}
}
}
.notice-success {
background-color: #fff;
color: #67C23A;
}
.notice-info {
color: #909399;
background-color: #fff;
}
.notice-warning {
color: #E6A23C;
background-color: #fff;
}
.notice-error {
background-color: #fff;
color: #F56C6C;
}
.notice-content {
font-size: 14px;
}
</style>
index.js
import Vue from 'vue'
import NoticeTpl from './Notice.vue'
const NoticeConstructor = Vue.extend(NoticeTpl)
let nId = 1
//在body下新建的标签类名
let tagClass = 'dialog-notice'
const Message = options => {
if (JSON.stringify(options) === undefined) { return false }
let id = 'notice-' + nId++
options = options || {}
if (typeof options === 'string') {
options = {
msg: options
}
}
const NoticeInstance = new NoticeConstructor({
data: options
})
NoticeInstance.id = id
NoticeInstance.vm = NoticeInstance.$mount()
NoticeInstance.vm.visible = true
NoticeInstance.dom = NoticeInstance.vm.$el
if (!document.querySelector(`body > .${tagClass}`)) {
let div = document.createElement('div')
div.classList.add(tagClass)
document.body.appendChild(div)
document.querySelector(`body > .${tagClass}`).appendChild(NoticeInstance.dom)
}
document.querySelector(`body > .${tagClass}`).appendChild(NoticeInstance.dom)
// NoticeInstance.dom.style.zIndex = nId + 1001
return NoticeInstance.vm
}
['success', 'warning', 'info', 'error'].forEach(type => {
Message[type] = options => {
if (typeof options === 'string') {
options = {
message: options
}
}
options.type = type
return Message(options)
}
})
export default {
install (Vue, options = {}) {
Vue.prototype.$notice = Message
}
}
全局css文件
.dialog-notice{
position: fixed;
top: 85px;
display: inline-block;
max-width: 300px;
left: 0;
right: 0;
margin: 0 auto 10px auto;
background-color: transparent!important;
text-align: center;
z-index: 9999;
}
main.js中注册使用
import Notice from './common/notice/index.js'
Vue.use(Notice)
使用
this.prototype.$notice.success({
msg: '代码复制成功'
})
更多推荐
已为社区贡献19条内容
所有评论(0)