解决模态框不显示的问题

之前的代码

User
<script setup lang='ts'>

import type { TabsPaneContext } from 'element-plus'
import { reactive, ref, onMounted, computed, Ref } from 'vue';
import { selectedStoreHook, useselectedStore } from "@/store/modules/selected";
import { ElMessage, formContextKey } from 'element-plus';
import { updatezidong } from '@/api/shezhi';
import { router } from "@/router/index";
import { getsendMessageData, getMessageData, changeMessageData } from "@/api/xitong";
// import line-md:person-filled from "@iconify-icons/line-md:person-filled";
const activeName = ref('first')
const store = useselectedStore();
//切换标签***********
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


let modalVisible = true
const activeButton = ref('');

const handleButtonClick = (buttonText) => {
  activeButton.value = buttonText;
  // 这里可以添加处理按钮点击事件的逻辑
};
//全部标为已读***************************

let typeid = 1
// 点击按钮显示模态框
const showConfirmationModal = (id) => {
  modalVisible = true;
  typeid = id
}
// 用户点击取消按钮
const handleCancel = () => {
  modalVisible = false;
}
// 用户点击确定按钮
const handleConfirm = () => {
  // 调用相应的方法，标为已读
  markAllAsRead();
  // 关闭模态框
  modalVisible = false;
}
// 处理模态框关闭事件
const handleModalClose = () => {
  // 处理模态框关闭时的逻辑
}
// 调用相应的方法，标为已读
const markAllAsRead = () => {
  if (typeid == 1) {
    data.value.forEach((element) => {
      changeMessageData(element.id).then((response) => {
        if (!response.success) {
          ElMessage.error(`消息id为${element.id}标记失败`);
        }
      });
    });

  } else if (typeid == 2) {
    data1.value.forEach((element) => {
      changeMessageData(element.id).then((response) => {
        if (!response.success) {
          ElMessage.error(`消息id为${element.id}标记失败`);
        }
      });
    });
  } else if (typeid == 3) {
    data2.value.forEach((element) => {
      changeMessageData(element.id).then((response) => {
        if (!response.success) {
          ElMessage.error(`消息id为${element.id}标记失败`);
        }
      });
    });
  }
}


//获取数据***********************
const data = ref([]);
const data2 = ref([]);
const data1 = ref([]);
const datas = ref([]);
const fetchData1 = () => {


  getMessageData().then((response) => {

    // 在这里处理返回的数据JSON.parse()
    datas.value = JSON.parse(JSON.stringify(response.data));
    data.value = [];
    datas.value = datas.value.reverse()
    datas.value.forEach(item => {
      switch (item.typeid) {
        case 0:
          switch (item.state) {
            case 0:
              item.state = "未读";
              break;
            case 1:
              item.state = "已读";
              break;
            case 2:
              item.state = "已读";

              break;
          }
          item.time = get_time_diff(item.time);
          data.value.push(item);
          break;
        case 1:
          item.time = get_time_diff(item.time);
          data1.value.push(item);
          break;
        case 2:
          item.time = get_time_diff(item.time);
          data2.value.push(item);
          break;
      }

    });

  });
  // Mock current time
  const now = new Date().getTime();

  // Test cases
  const result1 = get_time_diff(now - 2 * 24 * 3600 * 1000);
  const result2 = get_time_diff(now - 2 * 3600 * 1000);
  const result3 = get_time_diff(now - 2 * 60 * 1000);
  const result4 = get_time_diff(now - 2 * 1000);

  // Assertion
  console.log(result1, '2天');
  console.log(result2, '2小时');
  console.log(result3, '2分');
  console.log(result4, '2秒');
  console.log(get_time_diff(1643183390123))
};



function get_time_diff(time) {
  var diff = '';
  var time_diff = new Date().getTime() - time;

  // 计算相差年数
  var years = Math.floor(time_diff / (365 * 24 * 3600 * 1000));
  if (years > 0) {
    diff += years + '年';
  } else {
    // 计算相差月数
    var months = Math.floor(time_diff / (30 * 24 * 3600 * 1000));
    if (months > 0) {
      diff += months + '月';
    } else {
      // 计算相差天数 
      var days = Math.floor(time_diff / (24 * 3600 * 1000));
      if (days > 0) {
        diff += days + '天';
      } else {
        // 计算相差小时数 
        var leave1 = time_diff % (24 * 3600 * 1000);
        var hours = Math.floor(leave1 / (3600 * 1000));
        if (hours > 0) {
          diff += hours + '小时';
        } else {
          // 计算相差分钟数 
          var leave2 = leave1 % (3600 * 1000);
          var minutes = Math.floor(leave2 / (60 * 1000));
          if (minutes > 0) {
            diff += minutes + '分';
          } else {
            // 计算相差秒数 
            var leave3 = leave2 % (60 * 1000);
            var seconds = Math.round(leave3 / 1000);
            if (seconds > 0) {
              diff += seconds + '秒';
            }
          }
        }
      }
    }
  }

  return diff;
}

const handleArrowClick = (id, typeid) => {

  console.log('Corresponding ID:', id);
  store.$patch({
    messageid: id,
  })


  if (typeid != 3) { changeMessageData(id); }//消息已读
  router.push("/xitong1/messageitem");
};

//********** 编辑消息*/
const handleEditMessage = () => {
  // 在这里添加触发编辑消息的逻辑
  console.log('编辑消息');
};
onMounted(() => {
  fetchData1(); // 在组件挂载后发送请求并获取数据
});
</script>

<template>
  <div>
    <div class="divrow" style="width: 85vw;height: 45vw;">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="通知" name="first">
          <div class="divcolumn scroll-container" style="width: 85vw;height: 33vw;">
            <div v-for="(item, index) in data" :key="index">
              <div style="height: 100px; margin-bottom: 10px;">

                <el-card class="divrow" style="height: 100px;">
                  <div class="divcolumn">
                    <div style="display: flex;flex-direction: row;">
                      <strong>{{ item.title }}</strong>
                    </div>

                    <p class="item-content" style="width: 60vw;">{{ item.content }}</p>

                    <div class="divrow">
                      <text style=" margin-left: 10px; font-size: small; color: gray;">{{ item.time }}前</text>
                      <text style=" margin-left: 10px; font-size: 1.1vw; ">{{ item.from }}</text>
                    </div>
                  </div>

                  <img class="arrow-pointer" src="../../assets/svg/向右箭头.svg"
                    style="width: 2.5vw;margin-top: -4.5vw;margin-left: 80vw;" @click="handleArrowClick(item.id, 1)" />


                </el-card>
              </div>
            </div>

          </div>
          <el-button style="position: absolute;top:-48px;right:320px;z-index: 999999;color: #000;" type="text"
            @click="handleButtonClick('设置系统推送')" :class="{ 'blue-text': activeButton === '设置系统推送' }">
            <img src="../../assets/svg/设置2.svg" style="width: 1.2vw;" />设置系统推送
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:260px;z-index: 999999;color: #000;"
            @click="handleButtonClick('搜索')" :class="{ 'blue-text': activeButton === '搜索' }">
            <img src="../../assets/svg/搜索.svg" style="width: 1.2vw;" />搜索
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:160px;z-index: 999999;color: #000;"
            @click="handleButtonClick('显示未读')" :class="{ 'blue-text': activeButton === '显示未读' }">
            <img src="../../assets/svg/设置.svg" style="width: 1.2vw;" />显示未读
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:30px;z-index: 999999;color: #000;"
            @click="handleButtonClick('全部标为已读'), showConfirmationModal(1)"
            :class="{ 'blue-text': activeButton === '全部标为已读' }">
            <img src="../../assets/svg/标签.svg" style="width: 1.2vw;" />全部标为已读
          </el-button>


          <el-button type="primary" style="position: absolute; top: 34vw; right: 10px;" @click="handleEditMessage">
            编辑消息
          </el-button>
        </el-tab-pane>
        <el-tab-pane label="消息" name="second">

          <div class="divcolumn scroll-container" style="width: 85vw;height: 33vw;">
            <div v-for="(item, index) in data1" :key="index">
              <div style="height: 100px; margin-bottom: 10px;">

                <el-card class="divrow" style="height: 100px;">
                  <div class="divcolumn">
                    <div style="display: flex;flex-direction: row;">
                      <strong>{{ item.title }}</strong>
                    </div>

                    <p class="item-content" style="width: 60vw;">{{ item.content }}</p>

                    <div class="divrow">
                      <text style=" margin-left: 10px; font-size: small; color: gray;">{{ item.time }}前</text>
                      <text style=" margin-left: 10px; font-size: 1.1vw; ">{{ item.from }}</text>
                    </div>
                  </div>

                  <img class="arrow-pointer" src="../../assets/svg/向右箭头.svg"
                    style="width: 2.5vw;margin-top: -4.5vw;margin-left: 80vw;" @click="handleArrowClick(item.id, 2)" />


                </el-card>
              </div>
            </div>

          </div>
          <el-button style="position: absolute;top:-48px;right:320px;z-index: 999999;color: #000;" type="text"
            @click="handleButtonClick('设置系统推送')" :class="{ 'blue-text': activeButton === '设置系统推送' }">
            <img src="../../assets/svg/设置2.svg" style="width: 1.2vw;" />设置系统推送
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:260px;z-index: 999999;color: #000;"
            @click="handleButtonClick('搜索')" :class="{ 'blue-text': activeButton === '搜索' }">
            <img src="../../assets/svg/搜索.svg" style="width: 1.2vw;" />搜索
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:160px;z-index: 999999;color: #000;"
            @click="handleButtonClick('显示未读')" :class="{ 'blue-text': activeButton === '显示未读' }">
            <img src="../../assets/svg/设置.svg" style="width: 1.2vw;" />显示未读
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:30px;z-index: 999999;color: #000;"
            @click="handleButtonClick('全部标为已读'), showConfirmationModal(2)"
            :class="{ 'blue-text': activeButton === '全部标为已读' }">
            <img src="../../assets/svg/标签.svg" style="width: 1.2vw;" />全部标为已读
          </el-button>
        </el-tab-pane>
        <el-tab-pane label="待办" name="third">

          <div class="divcolumn scroll-container" style="width: 85vw;height: 33vw;">
            <div v-for="(item, index) in data2" :key="index">
              <div style="height: 100px; margin-bottom: 10px;">

                <el-card class="divrow" style="height: 100px;">
                  <div class="divcolumn">
                    <div style="display: flex;flex-direction: row;">
                      <strong>{{ item.title }}</strong>
                    </div>

                    <p class="item-content" style="width: 60vw;">{{ item.content }}</p>

                    <div class="divrow">
                      <text style=" margin-left: 10px; font-size: small; color: gray;">{{ item.time }}前</text>
                      <text style=" margin-left: 10px; font-size: 1.1vw; ">{{ item.from }}</text>
                    </div>
                  </div>

                  <img class="arrow-pointer" src="../../assets/svg/向右箭头.svg"
                    style="width: 2.5vw;margin-top: -4.5vw;margin-left: 80vw;" @click="handleArrowClick(item.id, 3)" />


                </el-card>
              </div>
            </div>

          </div>

          <el-button style="position: absolute;top:-48px;right:320px;z-index: 999999;color: #000;" type="text"
            @click="handleButtonClick('设置系统推送')" :class="{ 'blue-text': activeButton === '设置系统推送' }">
            <img src="../../assets/svg/设置2.svg" style="width: 1.2vw;" />设置系统推送
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:260px;z-index: 999999;color: #000;"
            @click="handleButtonClick('搜索')" :class="{ 'blue-text': activeButton === '搜索' }">
            <img src="../../assets/svg/搜索.svg" style="width: 1.2vw;" />搜索
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:160px;z-index: 999999;color: #000;"
            @click="handleButtonClick('显示未完成')" :class="{ 'blue-text': activeButton === '显示未完成' }">
            <img src="../../assets/svg/设置.svg" style="width: 1.2vw;" />显示未完成
          </el-button>
          <el-button type="text" style="position: absolute;top:-48px;right:30px;z-index: 999999;color: #000;"
            @click="handleButtonClick('全部标为已完成'), showConfirmationModal(3)"
            :class="{ 'blue-text': activeButton === '全部标为已完成' }">
            <img src="../../assets/svg/标签.svg" style="width: 1.2vw;" />全部标为已完成
          </el-button>
        </el-tab-pane>
      </el-tabs>

      <!-- 模态框 -->
      <el-dialog title="确认操作" :visible.sync="modalVisible" width="30%" @close="handleModalClose"
        style="z-index: 1000000000;">
        <p>确定要将所有消息标为已读吗？</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<style lang='scss' scoped>
::v-deep .el-tabs__content {
  overflow: visible;
  position: relative
}

.scroll-container {
  /* width: 300px; */
  /* 设置容器的宽度 */
  /* height: 200px; */
  /* 设置容器的高度 */

  overflow: auto;
  /* 开启滚动功能 */
}

.scroll-container::-webkit-scrollbar {
  width: 0;
  /* 隐藏滚动条 */
}

.arrow-pointer {
  cursor: pointer;
}

.blue-text {
  color: rgb(102, 168, 255) !important;
}

.item-content {
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 隐藏溢出部分 */
  text-overflow: ellipsis;
}
</style>

原因

1 决定模态框的绑定元素不是ref响应式

将定义的let modalVisible = false
改成 const modalVisible = ref(false)
然后你就会发现关于此常量的赋值全报错
直接在modalVisible 加上.value就好了

2 使用v-model即可

使用 :visible.sync="modalVisible"可能涉及异步

3 模态框在组件放置上的问题

有可能页面的z-index较高 一直覆盖 尝试将模态框的z-index 设置的高一点
或者模态框组件外层加个div并且设置好位置

思路

之后解决问题的时候，发现模态框不显示 可以尝试直接把false改成true 直接看是赋值的问题还是模态框的问题，能排除大部分的问题