Monitor network status
navigator.onLine Method
The code is as follows:
/* Monitor network status */
mounted(){
let that = this;
window.addEventListener('online', that.update, true);
window.addEventListener('offline', that.update, true);
},
/* Listener method */
update (){
let that = this;
that.onLineInfo = navigator.onLine ? "online" : "offline";
},Page Editable: Content Editable
Browsers can be turned into editors
The code is as follows:
/* Enter in the browser address bar */ data:text/html,<html contenteditable>
You can also edit the text of the current page (add/delete)
/* Input in console console */ document.body.contentEditable=true
The distance between an element in a page and the browser window
Use the getBoundingClientRect() method to get the left, top, right and bottom positions of an element in the page relative to the browser window, respectively. Documents are not rolled up. This function returns an object object with eight attributes: top, right, buttom, left, width, height, x, y.
The code is as follows:
/* Monitoring head fixation */
<div class="pride_tab_fixed" ref="pride_tab_fixed">
<div class="pride_tab" :class="titleFixed == true ? 'isFixed' :''">
//header
</div>
</div>
export default {
data(){
return{
titleFixed: false
}
},
activated(){
this.titleFixed = false;
window.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll: function () {
let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
this.titleFixed = offsetTop < 0;
}
}
}Whether the listening element is in the visible area of the device
The use of Intersection Observer can be used to monitor whether elements enter the visible area of the device without frequent computations.
So we can use this feature to deal with exposure buried points, instead of using getBoundingClientRect().top, which is a more lossy way to deal with performance.
IntersectionObserverFun: function() {
let self = this;
let ele = self.$refs.pride_tab_fixed;
if( !!IntersectionObserver ){
let observer = new IntersectionObserver(function(){
let offsetTop = ele.getBoundingClientRect().top;
self.titleFixed = offsetTop < 0;
}, {
threshold: [1]
});
observer.observe(document.getElementsByClassName('title_box')[0]);
} else {
window.addEventListener('scroll', _.throttle(function(){
let offsetTop = ele.getBoundingClientRect().top;
self.titleFixed = offsetTop < 0;
}, 50));
}
}, Those who like bloggers can pay attention to it.
--------------------------------------------------------------- END ------------------------------------------------------------------