Как отобразить компоненты при клике Vue js Вам необходимо использовать систему событий в Vue. На кнопку вешаете событие click с методом onClick, а в методе создаете событие, можете назвать его как угодно, в этом примере я назову его previewButtonWasClicked которое поднимется из компонента в родитель.
#gallery{ width: 640px; margin: 20px auto; text-align: center; } #gallery .photos img{ width: 100%; display: none; } #gallery .photos img:first-child{ display: block; } .buttons { margin-top: 20px; } let btn_prev = document.querySelector('#gallery .buttons .prev'); let btn_next = document.querySelector('#gallery .buttons .next'); let images = document.querySelectorAll('#gallery .photos img'); btn_prev.onclick = function(){ images[i].style.display = 'none'; i = i - 1; if(i < 0){ i = images.length - 1; } images[i].style.display = 'block'; } ----- Как в javascript "закрывать" div при клике вне этого дива? //open $(document).mouseup(function (e) { var container = $("YOUR CONTAINER SELECTOR"); if (container.has(e.target).length === 0){ container.hide(); } }); -- Вот ещё: $(".button").click(function() { $('.toggled_block').toggle(); }); $(document).on('click', function(e) { if (!$(e.target).closest(".parent_block").length) { $('.toggled_block').hide(); } e.stopPropagation(); }); .parent_block { width: 200px; height: 100px; } .button { width: 200px; height: 50px; background: #00BB65; border-radius: 5px; overflow: hidden; } .toggled_block { width: 200px; height: 50px; background: #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; display: none; }

Комментарии (0)





Разрешённые теги: <b><i><br>Написать