@blueking/notice-component

notice-component

蓝鲸消息通知业务组件-vue3版本, 公告分为跑马灯公告跟dialog公告两种

Install

npm install @blueking/notice-component

Usage

<script setup>
  import NoticeComponent from '@blueking/notice-component'
  import '@blueking/notice-component/dist/style.css'

  import { onBeforeMount, ref, computed } from 'vue'
  
  const list = ref([])

  // 公告列表中，是否含有跑马灯类型公告， 如果有跑马灯， navigation的高度可能需要减去40px， 避免页面出现滚动条
  const hasAlertNotice = computed(() => list.value.filter(item => item.announce_type === 'announce'))

  onBeforeMount(async () => {
    list.value = await $http.get('xxxxxxx/announcements/')
  })
</script>

<template>
  <!-- 跑马灯需要位于最顶部， 所以使用此组件时放在navigation上方 -->
  <notice-component :list="list" />
  <!-- 如果有跑马灯， navigation的高度可能需要减去40px， 避免页面出现滚动条， 可使用上述hasAlertNotice判断 -->
  <bk-navigation>
    xxxxxxx
  </bk-navigation>
</template>