JavaScriptNuxtJSVueJS

Динамический блок невыходящий за левый и правый края viewport

Для чего:

Например имеем динамические пункты меню которые в зависимости от ширины экрана перестраиваются от одной до N строк, и у них есть подменю, чтобы это подменю не выходило за край экрана, для этого и есть данный скрипт.

Блок смещён вправо чтобы не выходил за край экрана

Как применять:

let submenuAll = document.querySelectorAll('.submenu')

setClassPosSubmenu(submenuAll)

// И далее при ресайзе window тоже пересчитывать позицию элемента
window.addEventListener('resize',function(){
	setClassPosSubmenu(submenuAll)
})

function setClassPosSubmenu(submenuAll) {
	submenuAll.forEach(submenu, function(){
		let classPos = getPositionBlockLeftRight(submenu)
		submenu.classList.add(classPos)
	})
}

Лучше запускать этот скрипт при окончании window resize, а не каждую милисекунду window resize event

С помощью скрипта для выполнения функции после окончания события с небольшой задержкой, чтобы не множить выполнение функции когда по факту событие не достигло конечной точки

Как применять в Vue & Nuxt:

<template>
  <!-- blockName - предполагается уникальная строка (имя) блока -->
  <!-- ($refs[blockName])[0] - 0 индекс потому что предполагается один найденный вариант с уникальным именем блока -->
	<div
		:ref="blockName"
		:class="setClassLeftOrRight(($refs[blockName])[0])"
	>
</template>

<script setup>
	function setClassLeftOrRight(target) {
		// Тут важно сделать это когда Vue будет примонтирован,
		// чтобы было возможно использвоать вычисления window в функции:
	  return getPositionBlockLeftRight(target)
	}
<script>

null
play