vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Remove UI flicker

pull/4649/head
Cagatay Civici 2023-10-17 14:34:50 +03:00
parent 290f8e6c49
commit 7eff9bdb38
5 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app.vue
View File

@ -5,7 +5,6 @@
</template>
<script>
import News from '@/assets/data/news.json';
import EventBus from '@/layouts/AppEventBus';
export default {
@ -22,21 +21,6 @@ export default {
}
},
mounted() {
this.newsActivate = () => {
this.$appState.announcement = News;
const itemString = localStorage.getItem(this.$appState.storageKey);
if (itemString) {
const item = JSON.parse(itemString);
if (!item.hiddenNews || item.hiddenNews !== News.id) {
this.$appState.newsActive = true;
} else this.$appState.newsActive = false;
} else {
this.$appState.newsActive = true;
}
};
this.themeChangeListener = (event) => {
this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
this.$appState.theme = event.theme;
@ -46,11 +30,9 @@ export default {
};
EventBus.on('theme-change', this.themeChangeListener);
EventBus.on('news-activate', this.newsActivate);
},
beforeUnmount() {
EventBus.off('theme-change', this.themeChangeListener);
EventBus.off('news-activate', this.newsActivate);
}
};
</script>

20
layouts/AppNews.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="layout-news" :style="$appState.announcement.backgroundStyle">
<div v-if="$appState.newsActive" class="layout-news" :style="$appState.announcement.backgroundStyle" >
<div class="layout-news-container">
<i></i>
<div class="layout-news-content">
@ -14,11 +14,25 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import News from '@/assets/data/news.json';
export default {
mounted() {
EventBus.emit('news-activate');
const itemString = localStorage.getItem(this.$appState.storageKey);
if (itemString) {
const item = JSON.parse(itemString);
if (!item.hiddenNews || item.hiddenNews !== News.id) {
this.$appState.newsActive = true;
this.$appState.announcement = News;
} else {
this.$appState.newsActive = false;
}
} else {
this.$appState.announcement = News;
this.$appState.newsActive = true;
}
},
methods: {
onClose() {

2
layouts/default.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
<AppNews v-if="$appState.newsActive" />
<AppNews />
<AppTopBar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" @darkswitch-click="onDarkModeToggle" />
<AppConfigurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>

2
pages/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="landingClass">
<AppNews v-if="$appState.newsActive" />
<AppNews />
<AppTopBar :showConfigurator="false" :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
<HeroSection />
<FeaturesSection />

2
plugins/appState.js
View File

@ -1,6 +1,6 @@
const $appState = {
install: (Vue, options) => {
Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: true, announcement: {}, storageKey: 'primevue' });
Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' });
}
};