primevue-mirror/apps/volt/components/app/AppNews.vue

49 lines
1.4 KiB
Vue
Raw Permalink Normal View History

2025-02-28 11:49:42 +00:00
<template>
2025-03-11 08:14:17 +00:00
<div v-if="layoutState.newsActive" class="layout-news">
2025-02-28 11:49:42 +00:00
<div class="layout-news-container">
<i></i>
<div class="layout-news-content">
2025-03-11 08:14:17 +00:00
<span class="layout-news-text">{{ layoutState.announcement.content }}</span>
<a v-if="layoutState.announcement.linkHref" class="layout-news-link" :href="layoutState.announcement.linkHref">{{ layoutState.announcement.linkText }}</a>
2025-02-28 11:49:42 +00:00
</div>
<a class="layout-news-close" @click="onClose">
<span class="pi pi-times"></span>
</a>
</div>
</div>
</template>
2025-03-11 08:14:17 +00:00
<script setup>
2025-02-28 11:49:42 +00:00
import News from '@/assets/data/news.json';
2025-03-11 08:14:17 +00:00
import { onMounted } from 'vue';
2025-02-28 11:49:42 +00:00
2025-03-11 08:14:17 +00:00
const { layoutState } = useLayout();
2025-02-28 11:49:42 +00:00
2025-03-11 08:14:17 +00:00
onMounted(() => {
const itemString = localStorage.getItem(layoutState.storageKey);
2025-02-28 11:49:42 +00:00
2025-03-11 08:14:17 +00:00
if (itemString) {
const item = JSON.parse(itemString);
2025-02-28 11:49:42 +00:00
2025-03-11 08:14:17 +00:00
if (!item.hiddenNews || item.hiddenNews !== News.id) {
layoutState.newsActive = true;
layoutState.announcement = News;
} else {
layoutState.newsActive = false;
2025-02-28 11:49:42 +00:00
}
2025-03-11 08:14:17 +00:00
} else {
layoutState.announcement = News;
layoutState.newsActive = true;
2025-02-28 11:49:42 +00:00
}
2025-03-11 08:14:17 +00:00
});
const onClose = () => {
layoutState.newsActive = false;
const item = {
hiddenNews: layoutState.announcement.id
};
localStorage.setItem(layoutState.storageKey, JSON.stringify(item));
2025-02-28 11:49:42 +00:00
};
</script>