根据开始时间和结束时间形成的公告弹窗，右下角

最新推荐文章于 2025-02-27 14:11:36 发布

加油，前进

最新推荐文章于 2025-02-27 14:11:36 发布

阅读量412

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_63954739/article/details/140923286

版权

<div>
<el-dialog  
    v-for="item in filteredMessages" //循环数据
    :key="item.id"  
    @close="whh(item)"
    :visible="item.visible" //显示true还是false
     :title="item.title"  //标题
     class="fixed-bottom-right-ad"
     width="30%">  
      <p v-html="item.noticeContent"></p>  //内容
      <span slot="footer" class="dialog-footer">
        <el-button @click="item.visible = false">取 消</el-button>
        <el-button type="primary" @click="item.visible = false">确 定</el-button>
      </span>
    </el-dialog>

</div>

computed: {  
    // 使用计算属性来过滤出当前时间未超过结束时间的消息  
     filteredMessages() {         
        const now = new Date();   
        return this.noticeTable.filter(item => item.endTime > now);  
     } 
},
methods:{
  getnotice(){
      getnoticelist().then(response => {
        if(response.code == 200){
          this.noticeTable = response.rows//获取公告数据
          this.fetchMessages();//遍历循环数据
        }
      })
    },
    fetchMessages() { 
        this.noticeTable.forEach(item => {  
          if(item.startTime || item.endTime){//判断遍历的数据是否有开始时间和结束时间
            // 将每个日期字符串转换成Date对象，然后获取时间戳  
            item.startTime = new Date(item.startTime).getTime();  
            item.endTime = new Date(item.endTime).getTime();
            item.visible = false
            const now = new Date().getTime(); // 当前时间，UNIX时间戳  
            if (now >= item.startTime && now <= item.endTime) {  
              item.visible = true; // 如果当前时间在开始时间和结束时间之间，显示弹窗  
            } else {  
              item.visible = false; // 否则，隐藏弹窗  
            }  
          }
        
        });  
    },  
  whh(u){//点击取消
      u.visible = false
    },
}

/* 使用深度选择器来覆盖el-dialog的默认样式 */  
.fixed-bottom-right-ad ::v-deep .el-dialog {  
  /* 移除默认的margin和transform（如果有的话） */  
  margin: 0 !important;  
  transform: none !important;  
  /* 设置为固定定位 */  
  position: fixed;  
  bottom: 20px; /* 距离底部的位置 */  
  left: 70%;
  /* 覆盖其他可能需要的样式 */  
  border-radius: 8px;  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  
  // z-index: 1000; /* 确保弹窗在顶层 */  
} 
.fixed-bottom-right-ad{
  width: 5px !important;
  height: 10px !important;
  margin: 0 !important;  
  transform: none !important;  
  /* 设置为固定定位 */  
  position: fixed;  
  top: 80%;
  left: 70%;
}