Как исправить перекрытие navbar на выпадающих элементах на сайте vuepress - PullRequest
Новая
       36

Как исправить перекрытие navbar на выпадающих элементах на сайте vuepress

1 голос
/ 17 марта 2020

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

Конфигурация для этого в документах Vuepress - просто добавить элементы navbar и ariaLabel любой знает, как я могу остановить это поведение. 

themeConfig: {
    nav: [
      {
        text: 'Languages',
        ariaLabel: 'Language Menu',
        items: [
          { text: 'Chinese', link: '/language/chinese/' },
          { text: 'Japanese', link: '/language/japanese/' }
        ]
      }
    ]
  }

Вот пример vuejs events site FD Guide

1 Ответ

1 голос
/ 17 марта 2020

Чтобы ответить на ваш вопрос, нужно решить две разные проблемы:

  • как запустить пользовательский JavaSCript в VuePress?
  • как закрыть все ранее открытые раскрывающиеся списки по щелчку в моей текущей теме VuePress, используя JavaScript?

Для первой проблемы есть несколько решений (одно из них - использование пользовательского компонента с кодом, выполняемым в хуке mounted(), но для этого потребуется включить этот компонент на каждую страницу и убедиться, что он не запускается более одного раза (поскольку вы хотите привязать события к элементам).
Я считаю, что самый простой способ - добавить <script> до <head>, чего можно достичь, добавив это в head реквизит вашего .vuepress/config.js экспорта: 

head: [
  // ...existing stuff, if any,
  ['script', {}, `
    (function() { 
      // your code here...
    })(); 
 `]
]

Однако с вышеуказанным решением есть несколько проблем. Во-первых, оно идет будет запущен, как только он будет проанализирован, и он находится внутри тега <head>. Это означает, что содержимое вашей страницы еще не обработано. И вторая проблема заключается в том, что вы находитесь в литерале шаблона. я действительно не хочу писать код JavaScript в литерале шаблона. В идеале вы должны иметь возможность поместить свой код в файл '. js' и добавить его в виде тега <script>.

Для этого вам нужно создать папку .vuepress/public/, если у вас его еще нет Поместите туда свой файл .js (я использовал test.js, но не стесняйтесь называть его так, как вам нравится). Измените приведенный выше код на: 

['script', {}, `
  (function() { 
    var s = document.createElement('script'); 
    s.src = './test.js'; 
    var h = document.querySelector('head'); 
    h.appendChild(s); 
  })();
`]

Измените ./test.js на имя вашего файла.

Теперь ваш файл имеет чистую JavaScript и дверь открыта. Ваш код выполняется в контексте объекта окна.

Чтобы ответить на вторую часть вашего вопроса, ну ... во многом это зависит от темы, которую вы используете. Если вы используете тему по умолчанию (что, похоже, имеет место, из SS, которую вы разместили), это должно работать, если помещено в ваш файл .js: 

document.addEventListener('DOMContentLoaded', fixDropDowns);
function fixDropDowns() {
    document.body.addEventListener('click', (ev) => {
        const header = document.querySelector('header');
        if (header) {
            const dds = header.querySelectorAll('.dropdown-wrapper');
            [...dds].forEach(el => el.classList.remove('open'));
            const curr = ev.target.closest('.dropdown-wrapper');
            if (curr) {
                curr.classList.add('open');
            }
        }
    })
}

Но он основан на тщательная проверка сгенерированной разметки.
В частности, тот факт, что раскрывающиеся списки имеют класс .dropdown-wrapper, и что они открываются переключением класса open на них. Выше приведен только пример, и он, вероятно, не будет работать с другими темами и может даже перестать работать над темой по умолчанию в некоторых будущих версиях.

...