Значки FontAwesome не всегда отображаются в приложении Nativescript (Vue)? - PullRequest
Новая
       32

Значки FontAwesome не всегда отображаются в приложении Nativescript (Vue)?

0 голосов
/ 30 апреля 2020

Я работаю над приложением в Nativescript- vue. Приложение требует, чтобы пользователь вошел в систему. При запуске приложение проверяет appSettings, выполнил ли пользователь вход в систему. Если пользователь вошел в систему, пользователь попадает в меню выбора («Домой»). Если пользователь не вошел в систему, приложение загружает форму входа в систему, которая проверяет учетные данные на удаленной БД, а затем направляет пользователя в то же самое меню («Домой»).

В обоих В ситуациях, когда пользователь направляется в один и тот же файл, Home.vue. Эта страница состоит из 5 или около того кнопок, каждая со значком FontAwesome.

Проблема в том, что приложение отображает или не отображает значки в зависимости от того, как пользователь попадает в меню Home.vue.

  • Значки не отображается , когда пользователь при запуске указывает на Home.vue (переменная appSettings показывает, что пользователь вошел в систему, поэтому не должен представлять учетные данные). Обратите внимание, что вы можете углубиться в приложение, нажав кнопку, которая приведет вас к другому файлу *.vue, в котором также используются кнопки со встроенными значками FontAwesome работает .

  • Значки отображаются правильно, когда пользователь перенаправляется в файл Home.vue после представления действительных учетных данных имени пользователя / пароля, как на домашней странице, так и в последующих меню в приложении.

MAIN. JS

import Vue from 'nativescript-vue'

// Font Awesome!
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true;
TNSFontIcon.paths = {
  'fa': './assets/css/fontawesome.min.css',
  'far': './assets/css/regular.min.css',
  'fas': './assets/css/solid.min.css',
  'fab': './assets/css/brands.min.css'
};
TNSFontIcon.loadCss();

Vue.filter('fonticon', fonticon);

import {UserServices} from "./assets/js/UserServices.js"

import Login from "./components/Login.vue";
import Home from "./components/Home.vue"

let user = new UserServices();

new Vue({
    render: h =>  h('Frame', [
        h(
            (user.getLocalToken()) ? Home : Login
    )])
}).$start();

HOME. VUE. (Очень урезано, но все еще демонстрирует заявленное поведение) 

<template>
    <Page class="page" @loaded="loaded">
        <StackLayout>
            <Button @tap="tapLogoutButton">
                <FormattedString>
                    <Span
                        class="fas button-icon" stretch="none" :text="'fa-sign-out-alt' | fonticon"
                    />
                    <Span
                        text="  Logout"
                    />
                </FormattedString>
            </Button>
        </StackLayout>

    </Page>
</template>

<script>
    import Login from "./Login";
    import { UserServices } from '../assets/js/UserServices'
    let u = new UserServices();


    export default {

methods:  {

            tapLogoutButton(){
                if (u.logout()){
                    this.$navigateTo(Login, {
                        clearHistory: true
                    });
                };
            },
        }
    };
</script>

Любое понимание того, почему значки FA будут отображаться на одной странице (при загрузке) в зависимости от того, как пользователь оказался там?

1 Ответ

0 голосов
/ 01 мая 2020

Вы пытаетесь использовать плагин на своей первой странице, прежде чем он будет готов. loadCss() - асинхронная функция, возвращает обещание. Вы должны убедиться, что обещание выполнено, прежде чем использовать фильтр из плагина для рендеринга иконок.

Существуют различные способы решения этой проблемы

  1. Если это просто пара иконок в доме / страница входа, не используйте плагин, напрямую передайте код шрифта.
  2. вы можете создать шину / состояние событий, которая будет содержать логическое значение, установить его в значение true после разрешения метода loadCss(). Ваша страница Home & Login может полагаться на флаг, может быть с v-if. Плагину может потребоваться несколько миллисекунд для обработки файлов CSS.
  3. Вы можете изменить плагин для дополнительной поддержки синхронной загрузки, возможно, даже вызвать запрос на извлечение.
...