73 lines
1.4 KiB
Vue
73 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="screenSize === 'sm'" class="size-code bg-blue-500 text-white">
|
|
sm
|
|
</div>
|
|
|
|
<div v-if="screenSize === 'md'" class="size-code bg-green-500 text-white">
|
|
md
|
|
</div>
|
|
|
|
<div v-if="screenSize === 'lg'" class="size-code bg-yellow-500 text-black">
|
|
lg
|
|
</div>
|
|
|
|
<div v-if="screenSize === 'xl'" class="size-code bg-red-500 text-white">
|
|
xl
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
screenSize: '',
|
|
};
|
|
},
|
|
mounted() {
|
|
this.detectScreenSize();
|
|
window.addEventListener('resize', this.detectScreenSize);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.detectScreenSize);
|
|
},
|
|
methods: {
|
|
detectScreenSize() {
|
|
const width = window.innerWidth;
|
|
|
|
if (width < 640) {
|
|
this.screenSize = 'sm';
|
|
} else if (width >= 640 && width < 1024) {
|
|
this.screenSize = 'md';
|
|
} else if (width >= 1024 && width < 1280) {
|
|
this.screenSize = 'lg';
|
|
} else {
|
|
this.screenSize = 'xl';
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.size-code {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 50;
|
|
padding: 0.5rem;
|
|
margin: 0.5rem;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: monospace;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
border-radius: 0.25rem;
|
|
}
|
|
</style>
|