Qh-component-message NPM

消息中心使用文档

起步

安装

  npm i qh-component-message

  //引入组件
  import QhMessage from "qh-component-message/dist";
  Vue.use(QhMessage);
  //引入样式
  import "qh-component-message/dist/style.css";

使用

  <template>
    <QhMessage @on-close="close" :data="dataList" :total="total" ref="qhMessageRef" :visible="visible" />
  </template>
  <script>
    //消息提示音
    import messageNoice from "./assets/noice.wav";
    export default{
      data(){
        return {
          visible: true,
          dataList:[],
          total:0,
        }
      },
      methods:{
        close(){
          this.visible = false;
        }
      },
      mounted(){
        let wsHost = "ws://120.0.0.1/websocket?sessionId=1000000"
        //初始化websocket
        this.$refs["qhMessageRef"].initSocket(wsHost,messageNoice)
      },
    }
  </script>

注意

消息数据格式不需要修改，按照后端提供的数据传入即可

API

事件 `Event`

事件名称	描述
on-close	关闭消息中心事件
on-refresh	消息中心刷新事件
on-read-all	全部标记为已读事件返回当前页的所有消息id
on-read	标记单条消息为已读事件返回当前消息id
on-check-change	选择发生变化事件返回当前已选择的消息
on-batch-read	批量标记为已读返回当前选择的消息id
on-batch-remove	批量删除事件返回当前选择的消息id
on-remove	删除事件返回当前删除的id
on-change-system	消息系统类型选择事件返回当前选择的系统id
on-change-type	消息类型发生改变事件返回1或2 1为未读 2为已读
on-change-num	页码发生改变事件返回当前页码

属性 `Props`

属性名称	描述	类型
data	消息数据列表	Array
visible	消息中心显示状态	Boolean
typeList	消息系统类型	Array
loading	是否正在加载中	Boolean
pageSize	每页最大显示条数	Number
total	消息总条数(当total为0时，将不显示消息列表)	Number

函数 `Methods`

函数名称	参数	描述
initSocket	websocket服务地址-`String`消息提示音文件路径-`String`	调用该函数后将会在`window`对象中挂载`$qh_socket`属性，即当前创建的WebSocket客户端实用，获取该实例`window.$qh_socket`

uppercamelcase

@everything-registry/sub-chunk-2502 @infinitebrahmanuniverse/nolb-qh

1.0.0

2 years ago

消息中心使用文档

起步

注意

API

事件 Event

属性 Props

函数 Methods

事件 `Event`

属性 `Props`

函数 `Methods`