有一种方法我希望在单击nuxt-link时将其触发 在这种情况下,可以从其他任何页面访问主页。 单击该图像后,该图像将不会立即显示,然后再次单击它就会显示。 当我点击nuxt链接中的主菜单时,我看了看DOM,然后它遍历了一个我不知道它来自何处的标签。
<template lang='pug'>
header(class='header' name='top')
div(class='header__logo')
NLink(to='/' ) ABSYNTH
nav(class='header__nav')
ul(v-on:click='refreshImg')
li(class='close-dropdown')
NLink(to='/') Home
li(class='close-dropdown')
NLink(to='services') 서비스
li(class='header__submenu no-dropdown')
NLink(to='/') Services
ul
li(class='close-dropdown')
NLink(to='/카톡문의') 카톡문의
li(class='close-dropdown')
NLink(to='/') Link 2
li(class='close-dropdown')
NLink(to='/') Link 3
li(class='close-dropdown')
NLink(to='/') Link 4
li(class='close-dropdown')
NLink(to='/카톡문의') 카톡문의
li(class='header__submenu no-dropdown')
NLink(to='/') Portfolio
ul
li(class='close-dropdown')
NLink(to='/') Link 1
li(class='close-dropdown')
NLink(to='/') Link 2
li(class='close-dropdown')
NLink(to='/') Link 3
li(class='close-dropdown')
NLink(to='/') Link 4
li(class='close-dropdown')
NLink(to='/예약') 예약
div(class='header__menu-toggle') ☰
</template>
<script>
export default {
methods: {
refreshImg() {
const baseUrl = "https://res.cloudinary.com/dti9z2dmx/image/fetch";
Array.from(document.querySelectorAll("[data-img]")).forEach(function (img) {
const { clientWidth, clientHeight } = img;
const pixelRatio = window.devicePixelRatio || 1.0;
const imageParams = `w_${100 * Math.round((clientWidth * pixelRatio) / 100)},h_${100 * Math.round((clientHeight * pixelRatio) / 100)},c_auto,c_fill,f_auto`;
const url = `${baseUrl}/${imageParams}/${img.dataset.img}`;
$(img).attr('src', url);
});
}
}
};
</script>