You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AppNotification.vue 869B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div v-if="canShow" class="notification" @click="$emit('click')">
  3. <span class="close-icon" @click="close()">
  4. <FontAwesomeIcon icon="times-circle" />
  5. </span>
  6. <slot />
  7. </div>
  8. </template>
  9. <script>
  10. import { isNil } from 'lodash'
  11. export default {
  12. props: {
  13. name: {
  14. type: String,
  15. required: true,
  16. },
  17. },
  18. data: () => ({
  19. closed: false,
  20. }),
  21. computed: {
  22. canShow() {
  23. if (!isNil(localStorage.getItem(`notification_${this.name}`))) {
  24. return false
  25. }
  26. return !this.closed
  27. },
  28. },
  29. methods: {
  30. close() {
  31. localStorage.setItem(`notification_${this.name}`, 'true')
  32. this.closed = true
  33. },
  34. },
  35. }
  36. </script>
  37. <style lang="scss" scoped>
  38. .notification {
  39. @apply relative;
  40. }
  41. .close-icon {
  42. @apply absolute text-lg cursor-pointer;
  43. top: 5px;
  44. right: 10px;
  45. }
  46. </style>