解决模态框不显示的问题

之前的代码

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414

原因

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 直接看是赋值的问题还是模态框的问题，能排除大部分的问题