解决模态框不显示的问题

之前的代码

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 timeconst now = new Date().getTime();// Test casesconst 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);// Assertionconsole.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>