最近在逛博客的时候,发现右上角弹出公告挺好看的。
刚开始去问别人,都在说这个是插件,我就小心翼翼的问了一下插件的名字是什么......
A:这个插件叫什么名字哇,我去下载一下
B:你不会百度?这个插件是?
我傻了(这不是发一下名字的事么...)::quyin:fue::
当然,我还是太菜了
非常感谢博主的帮助->季春二九 感谢他告诉我这个不是插件
通过自己的摸索与他人的帮助,我也成功的将通知显示了出来.
话不多说,上教程!
1、需要去将下边代码加入到你的footer.php文件中,也可以只放到自己需要的位置!
{hide}
{collapse}
{collapse-item label="代码" close}
<script>
// 自定义公告显示
document.addEventListener('DOMContentLoaded', initNotice2);
function initNotice2() {
const common = {
loadResource: function (id, resource, type) {
return new Promise(function (resolve, reject) {
let loaded = document.head.querySelector('#' + id);
if (loaded) {
resolve('success: ' + resource);
return;
}
const element = document.createElement(type);
element.onload = element.onreadystatechange = () => {
if (!loaded && (!element.readyState || /loaded|complete/.test(element.readyState))) {
element.onload = element.onreadystatechange = null;
loaded = true;
resolve('success: ' + resource);
}
}
element.onerror = function () {
reject(Error(resource + ' load error!'));
};
if (type === 'link') {
element.rel = 'stylesheet';
element.href = resource;
} else {
element.src = resource;
}
element.id = id;
document.getElementsByTagName('head')[0].appendChild(element);
});
},
loadResources: function () {
const initVue = this.initVue;
const loadResource = this.loadResource;
const host = '//s0.pstatp.com/cdn/expire-1-M/';
const resources = [
'vue/2.6.10/vue.min.js',
'element-ui/2.8.2/index.js',
'element-ui/2.8.2/theme-chalk/index.css'
];
const loadPromises = [];
resources.forEach(resource => {
loadPromises.push(loadResource(btoa(resource).replace(/[=+\/]/g, ''), host + resource,
({
'css': 'link',
'js': 'script'
})[resource.split('.').pop()]
));
});
Promise.all(loadPromises).then(
function () {
let flag = false;
const waitVue = setInterval(() => {
if (!flag && typeof Vue === 'function') {
flag = true;
initVue();
clearInterval(waitVue);
}
}, 100);
}
);
},
initVue: function () {
var blog = new Vue({
el: document.createElement('div'),
created() {
this.sayHello();
window.alert = this.alert;
},
computed: {
hello: function () {
var hours = (new Date()).getHours()
var t
if (hours < 5) {
t = '凌晨了,注意休息哦!'
} else if (hours >= 5 && hours < 8) {
t = '早上好,新的一天又是元气满满呢!'
} else if (hours >= 8 && hours < 12) {
t = '上午好!'
} else if (hours === 12) {
t = '中午好!'
} else if (hours > 12 && hours <= 18) {
t = '下午好!'
} else if (hours > 18 && hours <= 22) {
t = '晚上好!'
} else if (hours > 22 && hours < 24) {
t = '夜深了,注意休息哦!'
}
return t
}
},
methods: {
alert: function (message, title, type, duration, showClose, offset, onClose) {
if (duration !== 0) {
duration = 4500;
}
this.$notify({
message: message,
type: type || 'error',
title: title || '警告',
duration: duration,
showClose: showClose || false,
offset: offset || 0,
onClose: onClose
})
},
sayHello: function () {
setTimeout(() => {
this.alert('欢迎来到 吃货智 的Blog!', this.hello, 'success');
}, 1000);
}
},
})
}
};
common.loadResources();
}
</script>
{/collapse-item}
{/collapse}
{/hide}
2、在此代码中主要使用的ElementUI框架中的通知组件,有需要更改的小伙伴可以自行去查看文档哦!
3、成功之后就是这个亚子
4、感兴趣的小伙伴可以把这个做成一个插件,分享给大家 ::(捂嘴笑)
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
本文链接:https://www.blog.ycisch.com/archives/586.html
木
我看看
666
看看看看
::(酷)