c-notice v1.2.9

项目名

cx-notice

项目描述

基于vite+ts+vue的公告栏组件

安装

npm install cx-notice --S

使用

1. CNoticeBar

在组件中导入CNoticeBar方法

import { CNoticeBar } from "cx-notice";
import 'cx-notice/dist/style.css'

show方法

通过调用show方法用于显示通知栏，接收一个options参数

options参数

interface IHistoryList {
  publishTime?: string;
  theme?: string;
  content?:string;
}

只做滚动通知

通过配置isOpenPopover为false选项作滚动通知

  CNoticeBar.show({
      message:'还爱是还hi哈四世',
      isOpenPopover:false,
  })

结合popover使用滚动通知

通过配置isOpenPopover为true选项作滚动通知

CNoticeBar.show({
  message:'还爱是还hi哈四世',
  isOpenPopover:true,
  noticeList: [
    {
      label:'2016-05-26',
      content:'又另对疫情期间对于音乐软件的使用情况做简要调查分析。',
    },{
      label:'2016-05-26',
      content:'又另对疫情期间对于音乐软件，运是用 SPSS 统计分析软件对数据进行处理'
    },{
      label:'2016-05-26',
      content:'又另对疫情期间对于音乐软数据，运是用 SPSS 统计分析软件对数据进行处理'
    },{
      label:'2016-05-26',
      content:'又另对疫情期间对于音乐软是用 SPSS 统计分析软件对数据进行处理'
    },{
      label:'2016-05-26',
      content:'又另对疫情期间析软件对数据进行处理'
    },{
      label:'2016-05-26',
      content:'又另对疫情期间对于音统计分析软件对数据进行处理'
    },{
      label:'2016-05-26',
      content:'又另对疫情期间对于音乐据，运是用 SPSS 统计分析软件对数据进行处理'
    }
  ]
})

close方法

如果想关闭通知栏，只需要使用close方法即可

2.createWebsocket

import { createWebsocket } from "cx-notice";

参数

连接

调用createWebSocket方法返回一个Websocket类型

const ws = createWebSocket(url, systemCode)

接收消息

使用返回的onmessage进行数据接收

ws.onmessage=(msg: string)=>{
console.log(msg);
}

注意：该方法在重连后可可能会无法再次接收重连后的信息

可以通过addEventListener监听socketMessage的数据

window.addEventListener('socketMessage', (msg)=>{
console.log(msg.detail.data);
});