廢話少說，上效果圖
前言
? ? 本人在做畢設(shè)的時候用elementui寫頁面的時候，覺得這個通知很有趣，可以用一個命令（this.$notify)這樣子調(diào)用，很神奇。所以打算自己封裝一個，以后就可以隨便調(diào)用了。
第一步：創(chuàng)建這個通知的模板
首先，你在vue的項目里面，找個合適的位置創(chuàng)建一個文件夾，創(chuàng)建一個vue的文件以及一個js文件
代碼如下
myNotify.vue
?我通過 transition?實現(xiàn)過渡，v-if 來決定顯示類型，其他的就是一些樣式了（個人覺得這樣寫挺冗余的，可以改進(jìn)）
<template>
<transition name="slide-fade">
<div class="my-notify" v-if="notifyFlag">
<div class="notify success" v-if="type=='success'">
<div class="tip">
<span>成功</span>
</div>
<div class="content"> {{content}}</div>
</div>
<div class="notify error" v-else-if="type=='error'">
<div class="tip">
<span>錯誤</span>
</div>
<div class="content">{{content}}</div>
</div>
<div class="notify warning" v-else-if="type=='warning'">
<div class="tip">
<span>警告</span>
</div>
<div class="content">{{content}}</div>
</div>
</div>
</transition>
</template>
<style scoped>
.slide-fade-leave-active {
transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to{
transform: translateX(10px);
opacity: 0;
}
.notify-wrap{
background-color: #1AFA29;
}
.my-notify{
margin: 10px;
width: 350px;
}
.notify{
position: relative;
right: 10px;
padding-left: 10px;
width: 320px;
height: 70px;
border-radius: 4px;
background-color:rgb(255, 244, 224);
box-shadow: -5px 5px 12px 0 rgba(204, 204, 204, .8);
animation: show cubic-bezier(.18,.89,.32,1.28) .4s;
}
.success{
border-left: 10px solid #1AFA29;
}
.error{
border-left: 10px solid #D81E06;
}
.warning{
border-left: 10px solid #F4EA2A;
}
.notify .tip{
height: 30px;
margin-bottom: 5px;
line-height: 30px;
}
.notify .tip span{
line-height: 30px;
font-size: 17px;
font-weight: 600;
}
.notify .content{
width: 320px;
height: 30px;
font-size: 15px;
}
@keyframes show{
0%{
right: -350px;
}
100%{
right: 10px;
}
}
</style>
index.js
在用element的通知的時候，我發(fā)現(xiàn)在他是通過在body里面插入元素來實現(xiàn)的，但是我覺得一個個的有點散，所以用一個div來包裹住他們，這樣一來還可以不用通過js來計算高度來實現(xiàn)排隊，反而變得更加簡單。通過timeout來記時，實現(xiàn)停留效果，監(jiān)聽timeFlag的變化來決定是否消失該條通知。注冊方法的作用在下面詳說。
import vue from 'vue'
import myNotify from './myNotify'
// 創(chuàng)建vue組件實例
const notify = vue.extend(myNotify);
//添加通知節(jié)點(用來存放通知的元素)
let notifyWrap = document.createElement('div');
notifyWrap.className = "notify-wrap"
notifyWrap.style = "position: fixed; right: 0px; transition-duration: .5s;"
document.body.appendChild(notifyWrap);
let myMsg = {
/**
* 通知框
* @content 提示內(nèi)容;
* @type 提示框類型，parameter： success，error，warning
* @time 顯示時長
*/
notify: ({
content,
type,
time = 1500,
}) => {
//創(chuàng)建一個存放通知的div
const notifyDom = new notify({
el: document.createElement('div'),
data () {
return {
notifyFlag: true, // 是否顯示
time: time,//取消按鈕是否顯示
content: content, // 文本內(nèi)容
type: type, // 類型
timer: '',
timeFlag: false,
}
},
watch:{
timeFlag(){
if(this.timeFlag){
this.notifyFlag = false;
window.clearTimeout(this.timer);
}
}
},
created(){
this.timer = setTimeout(() => {
this.timeFlag = true;
}, this.time);
},
beforeDestroy(){
window.clearTimeout(this.timer);
}
})
//往notifyWrap里面添加通知
notifyWrap.appendChild(notifyDom.$el);
}
}
//注冊
function register(){
vue.prototype.$myMsg = myMsg
}
export default {
myMsg,
register
}
可能大家會發(fā)現(xiàn)，這種格式有點陌生，如果有去vue官網(wǎng)觀摩過的話，這種格式反而更加熟悉，創(chuàng)建一個vue對象，諸如此類的。
好了問題來了。主題功能有了，我們時如何實現(xiàn)用this.$xxx來調(diào)用呢？
第二步：注冊
?進(jìn)入main.js添加就可以了。
import Vue from 'vue';
import App from './App';
import router from './router';
import store from "./store/store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import api from "@/server/api.js";
//這行
import message from "@/components/myMsg/index"
Vue.config.productionTip = false;
Vue.prototype.$http = api;
Vue.use(ElementUI);
//和這行
Vue.use(message.register);
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
只要上面注釋的那兩行就可以了。其實這里可以偷懶，因為命名為index，所以在引入路徑的時候可以不用加上index。在這里，你可以看到注冊了，沒錯上面的注冊方法是放在這里弄得，當(dāng)然，也可以分開寫，各自喜歡咯！
第三步：調(diào)用
好了，搞了這么久，該怎么調(diào)用呢？
this.$myMsg.notify({
content: "啦啦啦",
type: 'success',
//time: 5500
});
是不是幾乎一樣，趕緊試試！
結(jié)束
?本人還是個實習(xí)生，可能上面還有很多不合理得地方吧，還請各位大神多多指教！
|
