滚动播报、el-scrollbar

<template>
  <div>
    
    <div id="filePageTool" class="filePageTool" v-show="filePageToolFlag">
      <div
        class="ftitle"
        @click="
          changeShowBtn;
          fbodyShow = !fbodyShow;
        "
      >
        <img
          src="@/assets/img/gonggaoguanli@2x.png"
          width="20px"
          style="padding-left: 15px"
          alt=""
        />
        <span> 通知公告span>
      div>
      <div
        @click="
          changeShowBtn;
          fbodyShow = !fbodyShow;
        "
      >
        <img
          :src="
            fbodyShow
              ? require('@/assets/img/收起@2x.png')
              : require('@/assets/img/展开@2x.png')
          "
          width="18px"
          style="position: absolute; right: 10px; top: 11px"
          alt=""
        />
      div>
      <div class="notice-body" v-if="fbodyShow">
        <div class="fbody">
          <el-scrollbar style="height: 100%" ref="scroball">
            <table>
              <tr
                class="pageList"
                v-for="m in tableDataList"
                @mouseleave="mouseTableLeave"
                @mouseover="mouseTableOver"
                :key="m.id"
                :title="m.fileTitle"
              >
                <td>
                  
                  <div style="width: 100%" class="noticeActiveDiv">
                    <a
                      target="_blank"
                      class="noticeActive"
                      @click="toDetail(m)"
                    >
                      <div
                        class="notice"
                        style="
                          line-height: 35px;
                          font-size: 14px;
                          font-weight: 500;
                        "
                      >
                        {{ m.fileTitle }}
                      div>
                      <div style="line-height: 15px; color: #dbfdf9">
                        {{ m.publishingTime }}
                      div>
                    a>
                  div>
                td>
              tr>
 
              
            table>
          el-scrollbar>
        div>
      div>
 
      <p class="more-notice" @click="more" v-show="tableDataList.length > 1">
        更多>>
      p>
    div>
  div>
template>
 
<script>
import { mapActions } from "vuex";
import http from "@/service/interface.js";
export default {
  name: "layout",
  data() {
    return {
      filePageToolFlag: true,
      activeMenuList: undefined,
      fbodyShow: true,
      tableDataList: [],
      menuList: [],
      scrolHeight: 0,
    };
  },
  methods: {
    async initPolicy() {
      let params = {
        pageNum: 1,
        pageSize: 999999,
        // userId: localStorage.getItem("userId"),
        userId: localStorage.getItem("id"),
        fileType: "通知公告",
        key: "",
      };
      let res = await http.getPolicyPageList(params);
 
      if (res.status === 200) {
        this.tableDataList = res.data.records;
        localStorage.setItem("recordsInfo", this.tableDataList);
        this.tableDataList.forEach((item) => {
          item.src = `通知公告/${item.filePath}`;
        });
        if (this.tableDataList.length == 0) {
          this.tableDataList = [
            {
              fileTitle: "暂无公告",
              publishingTime: "",
              src: "",
            },
          ];
        }
        console.log(this.tableDataList, "通知公告====");
      }
    },
    toDetail(row) {
      console.log(row,'=====row');
      if (this.tableDataList.length > 1) {
        localStorage.setItem("detailsParam", JSON.stringify(row));
        this.$router.push("/policyAnnouncements/details");
      }
    },
    more() {
      let routeUrl = this.$router.resolve({
        name: "policyAnnouncements",
      });
      window.open(routeUrl.href, "_blank");
    },
    // 关闭公告
    changeShowBtn() {
      this.filePageToolFlag = !this.filePageToolFlag;
    },
    creteTableInterval(scrolHeight) {
      if (this.tableInterval) {
        clearInterval(this.tableInterval);
      }
      let scrolMax;
      this.$nextTick(() => {
        if (this.$refs.scroball?.wrap) {
          scrolMax = this.$refs.scroball.wrap.scrollHeight;
        }
      });
      this.tableInterval = setInterval(() => {
        this.$nextTick(() => {
          this.scrolHeight++;
          if (scrolMax - this.scrolHeight < 220) {
            this.scrolHeight = 0;
          }
          if (this.$refs.scroball?.wrap) {
            this.$refs.scroball.wrap.scrollTop = this.scrolHeight;
          }
        });
      }, 50);
    },
    mouseTableLeave() {
      setTimeout(() => {
        this.creteTableInterval(this.scrolHeight);
      }, 1000);
    },
    mouseTableOver() {
      clearInterval(this.tableInterval);
      this.$nextTick(() => {debugger
        this.scrolHeight = this.$refs.scroball?.wrap.scrollTop;
      });
    },
  },
  mounted() {
    this.creteTableInterval(0);
    this.initPolicy();
  
  },
  watch: {},
};
script>
 
<style scoped>
.filePageNotice {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 25px;
  height: 25px;
  background-color: rgba(92, 87, 87, 0.3);
  background: rgba(0, 23, 46, 0.8);
  border: 1px solid #15d0ba;
  border-radius: 2px;
  color: #fff;
}
 
.filePageNotice button {
  background: linear-gradient(180deg, #006b6e 0%, #00a771 100%);
}
 
.filePageTool {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(92, 87, 87, 0.3);
  width: 239px;
  /* height: 337px; */
  background: rgba(0, 23, 46, 0.8);
  border-radius: 1px;
  border: 1px solid #15d0ba;
  border-radius: 2px;
  cursor: default;
}
 
.filePageTool .ftitle {
  width: 239px;
  line-height: 38px;
  background: linear-gradient(180deg, #006b6e 0%, #00a771 100%);
  border-radius: 1px;
  color: aliceblue;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
 
.notice-body {
  padding: 15px;
}
 
.filePageTool .fbody {
  height: 270px;
}
 
.filePageTool .fbody table .pageList td .noticeActiveDiv .noticeActive .notice {
  line-height: 35px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}
 
.more-notice {
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: right;
  margin-right: 10px;
  cursor: pointer;
}
 
.pageList {
  height: 40px;
  border-bottom: 1px solid #000;
  color: #fff;
}
 
.filePageTool .text {
  color: aliceblue;
  width: 100px;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  font-weight: 800;
}
 
.filePageTool ul {
  padding-top: 100px;
}
 
.noticeActive {
  color: white;
  text-decoration: none;
}
 
.noticeActive:link {
  color: #fff;
  text-decoration: none;
}
 
/* 未访问的链接 */
.noticeActive:visited {
  color: #fff;
  text-decoration: none;
}
 
/* 已访问的链接 */
.noticeActive:hover {
  color: greenyellow;
  text-decoration: underline;
}
 
/* 鼠标移动到链接上 */
.noticeActive:active {
  color: #f00;
}
 
/* 选定的链接 */
style>