Vue - установить другой значок, когда браузер онлайн или офлайн - PullRequest
Новая
       9

Vue - установить другой значок, когда браузер онлайн или офлайн

0 голосов
/ 02 июля 2019

Я пытаюсь установить различные значки, когда мой браузер подключен (обычный логотип) и отключен (серый логотип). Я использую Vue JS, и я могу обнаруживать сетевые и автономные настройки, я также могу установить различные значки для разных состояний, но значок автономного режима не будет отображаться, поскольку в моем браузере нет Интернета для получения значка.

Каков наилучший подход для достижения этой цели? Код, который я использую ниже, кстати, я использую 'v-offline' для обнаружения состояний онлайн или офлайн 

    handleConnectivityChange (status) {
      status ? $('#favicon').attr('href', 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-on.png') : $('#favicon').attr('href', 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-off.png')
    }

1 Ответ

0 голосов
/ 02 июля 2019

Для этого есть два элемента: предварительная загрузка значков и их динамическая установка.

Первая часть может быть достигнута различными способами. Я бы выбрал метод Vue created, так как вы можете показывать счетчик на странице, пока компонент не станет mounted. Это, вероятно, лучше подходит как миксин, а не непосредственно на компоненте. 

data() {
    return {
        favicons: {} // we need to store the images to prevent the browser releasing them
    }
},

created () {

    // This can be improved but the logic is here

    // Create the JS images
    this.favicons = {
        'online': new Image(),
        'offline': new Image()
    };

    // Set the source properties
    this.favicons.online.src = 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-on.png';
    this.favicons.offline.src = 'https://snackify-cdn.sfo2.digitaloceanspaces.com/favicon-off.png';

}

Затем, чтобы обновить значок, вы можете сделать что-то вроде следующего: 

handleConnectivityChange (status) {

    // Get or create the favicon
    let link = document.querySelector("link[rel*='icon']") || document.createElement('link');

    // Set the attributes of the favicon
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = status ? this.favicons.online.src : this.favicons.offline.src;

    // Append the favicon to the `head`
    document.getElementsByTagName('head')[0].appendChild(link);
}

Кредит для: Динамическое изменение иконки сайта

В качестве примечания, и это только мое мнение, я бы посоветовал отказаться от jQuery, если вы используете Vue. Это очень мало нужно, и это только увеличивает накладные расходы. В этом сценарии вы можете очень легко использовать vanilla JS для достижения того, что вам нужно, как показано в примере. .

...