@blueking/notice-component-vue2

notice-component

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

Install

npm install @blueking/notice-component-vue2

如果先前安装过1.x.x版本， 请升级到^2.0.0以上版本

Usage

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

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

  export default {
    components: {
        NoticeComponent
    },
    data () {
        return {
            // 可以写接口url的绝对路径或相对路径， 相对路径的话注意社区版时平台以子路径部署的形式
            apiUrl: '/xxxxxx/sdk/announments',
            // 是否含有跑马灯类型公告， 如果有跑马灯， navigation的高度可能需要减去40px， 避免页面出现滚动条
            showAlert: false
        }
    },
    methods: {
        // 公告列表change事件回调， isShow代表是否含有跑马灯类型公告
        showAlertChange (isShow) {
          this.showAlert = isShow
        }
    }
  }
</script>