avue-notice的加载更多显隐及触发事件

项目场景：

基于vue2的avue中的消息通知组件avue-notice中【加载更多】字样的显隐控制

问题描述

【加载更多】的隐藏，avue官网中没有详细描述，消息加载完成后还有改按钮。

解决方案：

查看avue的源码了解其实是有显隐控制的

	<div :class="b('more')"
         v-if="!finish"
         v-loading="loading"
         @click="handleClick">
      加载更多
    </div>

最终代码：

	<avue-notice
        :data="data"
        :option="option"
        :finish="finish"  //控制加载更多的显隐，false隐藏
        @click="handleDeleteNotice"  //点击消息是触发事件,事件中逻辑为将消息标为已读
        @page-change="pageChange"    //点击加载更多时触发的事件
      ></avue-notice>

/**
 *加载更多的触发事件
 */
pageChange (){
    this.loading = false;
    this.size = this.size +10;  //每次多获取10条数据
    getNotices(this.current,this.size).then((res) => { //调用接口获取数据
      this.data = res.data.data.records;     //将获取的数据给到消息组件绑定的data
      this.num = res.data.data.total;        //该全局变量表示消息按钮上方的气泡显示的数值，即为未读消息的总数
      if(this.num === this.data.length){     //未读消息的总数与显示数据数量相同时
        this.finish = true;					 //隐藏加载全部按钮
        this.$message.success('已加载全部');
      }
      this.loading = true;
    });
}