Для отслеживания ширины экрана автоматически на Vue.js можно использовать директиву v-resize, которая реагирует на изменение размеров окна. Эта директива может быть простым оберткой над событием resize.
Для начала, создадим новый компонент ResizeWatcher, в котором будем отслеживать изменение размеров экрана и реагировать на него. Вот пример кода:
<template>
<div></div>
</template>
<script>
export default {
mounted() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
// Ваш код здесь
}
}
}
</script>
Теперь, чтобы получить текущую ширину экрана в методе handleResize, мы можем использовать window.innerWidth. Это свойство позволяет получить ширину окна браузера.
Но что делать, если нам нужно обновить данные в реактивном состоянии Vue? В этом случае нам понадобится использовать комбинацию реактивных свойств и методов.
Добавим переменную windowWidth в состояние компонента и обновим ее при изменении размеров окна. Затем включим отслеживание windowWidth и выведем его значение в шаблоне. Вот пример кода:
<template>
<div>
<p>Ширина экрана: {{ windowWidth }} пикселей</p>
</div>
</template>
<script>
export default {
data() {
return {
windowWidth: 0
};
},
mounted() {
this.handleResize();
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.windowWidth = window.innerWidth;
}
}
}
</script>
Теперь, при каждом изменении размеров экрана, значение windowWidth будет обновляться автоматически, и выведется в шаблоне.
Это простой пример отслеживания ширины экрана на Vue.js. Вы можете добавить дополнительную функциональность, например, реагировать на определенные диапазоны ширины или выполнять другие действия при изменении размеров окна.