return 'eqf-info-f'
case 'warn':
return 'eqf-alert-f'
}
}
},
mounted() {
setTimeout(() => this.close(), 4000)
},
methods: {
close() {
}
}
}
</script>
<style lang="scss">
.eqc-notifier {
position: fixed;
top: 68px;
left: 50%;
height: 36px;
padding-right: 10px;
line-height: 36px;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px;
background: #fff;
z-index: 100; // 层级最高
transform: translateX(-50%);
animation: fade-in 0.3s;
.icon {
margin: 10px;
font-size: 16px;
}
.close {
margin: 8px;
font-size: 20px;
color: #666;
transition: all 0.3s;
cursor: pointer;
&:hover {
color: #ff296a;
}
}
&.success {
color: #1bc7b1;
}
&.fail {
color: #ff296a;
}
&.info {
color: #1593ff;
}
&.warn {
color: #f89300;
}
&.close {
animation: fade-out 0.3s;
}
}
</style>
在这里需要注意，我们定义了一个close方法，但内容是空的，虽然在模板上有用到，但是似乎没什么意义，在后面我们要扩展组件的时候我会讲到为什么要这么做。
创建完这个组件之后，我们就可以在模板中使用了<notification type=”xxx” msg=”xxx” />
实现通过方法调用该通知组件
其实在实现通过方法调用之前，我们需要扩展一下这个组件，因为仅仅这些属性，并不够我们使用。在使用方法调用的时候，我们需要考虑一下几个问题：
显示反馈的定位
组件的出现和自动消失控制
连续多次调用通知方法，如何排版多个通知
在这个前提下，我们需要扩展该组件，但是扩展的这些属性不能直接放在原组件内，因为这些可能会影响组件在模板内的使用，那怎么办呢？这时候我们就要用到Vue里面非常好用的一个API，extend，通过他去继承原组件的属性并扩展他。
来看代码
import Notifier from './Notifier.vue'function install(Vue) {
Vue.notifier = Vue.prototype.notifier = {
success,
fail,
info,
warn
}
}
function open(type, msg) {
let UiNotifier = Vue.extend(Notifier)
let vm = new UiNotifier({
propsData: { type, msg },
methods: {
close: function () {
let dialog = this.$el
dialog.addEventListener('animationend', () => {
document.body.removeChild(dialog)
this.$destroy()
})
dialog.className = `${this.type} eqc-notifier close`
