Preface
When doing your own projects, it is useful to determine whether the device has screen cuts. Generally, the examination system is used more often. We all know that screen cutting can be easily monitored. However, when the small window is opened, there has been no solution before. Now, we use the monitoring screen cutting and small window to teach you how to set up monitoring.
Screen cutting monitoring
Method 1
The Vue framework provides a $hidden property that can be used to determine whether the current page is hidden (such as in the background tab). The following is the specific code:
export default {
data () {
return {
isHidden: false // Whether the page is hidden (the initial value is false) };
},
created () {
// Listen to document visibilityState change event (used to listen to whether the page is hidden) ('visibilitychange', );
},
destroyed () {
// Unlisten the event ('visibilitychange', );
},
methods: {
// Whether the listening page is hidden onVisibilityChange () {
= ;
if () { // The current page is hidden // Perform related operations } else { // The current page is opened // Perform related operations }
}
}
};In the Vue component, the above code uses the $hidden attribute to determine whether the current page is hidden and performs corresponding operations based on the value. It should be noted that listening events must be unstopped before shutting down components to avoid memory leaks.
Method 2
Vue's activated and deactivated lifecycle functions can be used to determine whether the page is hidden due to switching.
The specific code is as follows:
export default {
data() {
return {
isActive: false, // Whether the logo page is active isHidden: false, // Whether the logo page is hidden };
},
activated() {
= true;
if () {
('The page switches from hidden state to active state');
// TODO: Execute logic when the page needs to be switched from hidden state to active state }
= false;
},
deactivated() {
= false;
if (!) {
('The page switches from active to hidden state');
// TODO: Execute logic when the page needs to be switched from active to hidden state }
= true;
},
};In the code, we define two variables isActive and isHidden, which represent whether the page is active and hidden.
When the activated lifecycle function is triggered, we set isActive to true, and if the page was previously hidden, it means that the page was hidden because of the switch. At this time, we can execute some logic that needs to be switched from hidden to active state.
Similarly, when the deactivated lifecycle function is triggered, we set isActive to false, and if the page was active before, it means that the page was hidden because of the switch. At this time, we can execute some logic that needs to be switched from active to hidden state.
At the same time, we also need to set the value of isHidden according to the order of the activated and deactivated lifecycle functions to accurately mark whether the page is hidden.
Small window monitoring
Method 1
At first I had no idea, but now I can actually compare the size of the monitor window with the actual window. If it has been said that it has not become a small window, otherwise it means that the small window is opened, then we can add the logic we need by monitoring it.
Vue itself does not directly provide an API to monitor whether the device opens a small window, but it can monitor the changes in the resize event of the window object through JavaScript and obtain the current viewport width and height through and then infer whether the device opens a small window.
The specific implementation method is as follows:
Listen to the resize event in the Vue component
<template>
<div>{{ status }}</div>
</template>
<script>
export default {
data() {
return {
status: ''
};
},
created() {
('resize', );
},
beforeDestroy() {
('resize', );
},
methods: {
check() {
if ( < ) {
= 'Open the window';
} else {
= 'Not small window';
}
}
}
};
</script>
html
<template>
<div>{{ status }}</div>
</template>
<script>
export default {
data() {
return {
status: ''
};
},
created() {
('resize', );
},
beforeDestroy() {
('resize', );
},
methods: {
check() {
if ( < ) {
= 'Open the window';
} else {
= 'Not small window';
}
}
}
};
</script>
In the above code, we use the resize event of the window object and add that listener when component is created. The check() method checks the viewport size and outputs the result before and after resize is triggered.
The device status is determined based on whether the viewport size changes.
In the above check() method, we use some calculation methods to determine the device status. The main idea is to compare the viewport height and window height. If the viewport height is smaller than window height, the device is considered to be in small window mode, otherwise it is non-small window mode.
In short, this is a feasible way to detect whether the device opens a small window, but it should be noted that different devices and browsers may have different response speeds, so we need to conduct appropriate testing and adjustments in specific situations.
Method 2
In addition to the above methods, you can also passmatchMediaConduct a query
The following code is a method to use media query (Media Query) to determine whether to open a small window, which has nothing to do with the Vue framework:
// Create a media query instanceconst mediaQuery = ('(max-width: 768px)');
// Listen to media query changes and execute callback functions(function (mq) {
if () { // The current window size meets the small window conditions // Perform related operations } else { // The current window size does not meet the small window conditions // Perform related operations }
});In the above code, we use the matchMedia method to create a media query instance and pass the widget condition into it as a parameter. After that, the addListener method is used to listen for changes in the instance, and the corresponding operation is performed based on whether the current window size meets the small window conditions.
It should be noted that when using this method,
It is necessary to ensure that the set media query conditions are consistent with those defined in the CSS style sheet., otherwise it may lead to errors in judgment.
Method 3
You can also determine whether to open the small window by operating the DOM element.
The following code is a method to determine whether the small window is opened by detecting the width of the DOM element:
export default {
data () {
return {
isSmallScreen: false // Whether to open the small window (the initial value is false) };
},
mounted () {
// Determine the initial window size when the component is loaded for the first time ();
},
methods: {
// Check the current window size and update the isSmallScreen variable based on this value to get the value checkWindowSize () {
const elementWidth = ;
if (elementWidth <= 768) {
= true;
} else {
= false;
}
}
}
};In the above code, we use the checkWindowSize function to check the current window width and update the value of the isSmallScreen variable based on this value. It should be noted that the checkWindowSize function must be executed once when the component is rendered for the first time to ensure that the page is displayed correctly.
This method is more accurate than using media query or monitoring screen size changes, but inevitably requires operating the DOM.
Pay attention to efficiency and performance issues。
Conclusion
The above is the process of implementing vue monitoring screen cutting and opening small windows
This is the article about whether vue monitors are cut and open small windows. For more related contents for vue monitors, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!