请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

作业遇到的bug，添加代办事项后的todo进行删除，有时候会停在9s，无法实现自动退出了，只要添加过代办事项，一定停在9s

老师，我遇到个bug，留的删除作业10s自动退出感觉有点问题，停在9s
图片描述
App.vue新增代码如下：

<script setup>
import MyDelete from "./components/delete.vue";
const MydeleteShow = ref(false);
const indexOfTodo = ref();
const deleteTodo = function (index) {
  console.log("deleteTodo");
  indexOfTodo.value = index;
  MydeleteShow.value = true;
};

const deleteTodoConfirm = function (index) {
  MydeleteShow.value = false;
  list.value[index].del = true;
};
const deleteTodoCancel = function () {
  MydeleteShow.value = false;
};
</script>
<template>
  <MyDelete
    :isShow="MydeleteShow"
    @del="deleteTodoConfirm"
    @cancel="deleteTodoCancel"
    :index="indexOfTodo"
  />
</template>

delete.vue的主要代码如下：

<script setup>
import { defineProps, defineEmits, ref, watch } from "vue";
const props = defineProps({
  isShow: Boolean,
  index: Number,
});
const isShow = ref(props.isShow);
const count = ref(10);
const updateCount = function () {
  count.value--;
  if (count.value === 0) {
    clearInterval(timer);
    cancel();
  }
};
let timer = setInterval(updateCount, 1000);

watch(
  () => props.isShow,
  (value) => {
    isShow.value = value;
    if (isShow.value === true) {
      count.value = 10;
      updateCount();
    }
  },
);
const indexOfTodo = ref();
watch(
  () => props.index,
  (value) => {
    indexOfTodo.value = value;
  },
);

const emits = defineEmits(["del", "cancel"]);
const del = function () {
  isShow.value = false;
  emits("del", indexOfTodo.value);
};
const cancel = function () {
  isShow.value = false;
  emits("cancel");
};
</script>

<template>
  <div v-if="isShow" class="masking"></div>
  <div v-if="isShow" class="popover">
    <div class="popover-con">
      <div class="popover-info">
        <div class="content">
          <p>警告（{{ count }}秒后自动取消）</p>
          <p>是否要删除当前选项？</p>
        </div>
        <div class="operateBar">
          <button @click="cancel">取消</button>
          <button @click="del">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>
声声入耳 2024-12-18 16:54:56
源自：4-8  Vue3组件与自定义组件（二）
153
收起

正在回答 回答被采纳积分+3

插入代码

提交 取消

3回答

西一凹 2024-12-19 21:44:27

同学你好，通过你提供的代码分析，主要的问题在于

一般情况下，组件的显示隐藏，不需要将 用于显示状态的变量 传入组件内部，

即你代码的这个位置

https://img1.sycdn.imooc.com/szimg/67641e69090b5c3606500303.jpg

可以改为下图

https://img1.sycdn.imooc.com/szimg/67641e9109b6c2c406610345.jpg

组件的显示与隐藏，由使用者决定

----------------

同理，在这个功能中，要删除元素的下标，也不需要传入组件，而是在点击的时候自行用变量记录即可，组件内部只决定，是“确定”还是取消

https://img1.sycdn.imooc.com/szimg/67641ec60927b53512040644.jpg

即改为下图所示

https://img1.sycdn.imooc.com/szimg/67641f1b09505e9408820311.jpg


-----------

经过上面的操作后，组件内部，将不需要通过状态再来重置  某些变量的初始值，

即：组件内部下图框选部分全部删除


https://img1.sycdn.imooc.com/szimg/67641f6709eb28c811000960.jpg

https://img1.sycdn.imooc.com/szimg/67641f90097071c910870801.jpg

https://img1.sycdn.imooc.com/szimg/67641fc30951892f07710327.jpg

https://img1.sycdn.imooc.com/szimg/67641fdc0937defb12420848.jpg

即：最终组件内部代码如下

https://img1.sycdn.imooc.com/szimg/67641ffd09b03bc012400852.jpg

https://img1.sycdn.imooc.com/szimg/6764200e096852b712390723.jpg

修改完成后

最后只需处理，“调用者 ”接受  组件 提交的 “del”事件

https://img1.sycdn.imooc.com/szimg/6764207b09d233fb10900239.jpg

上方的函数的 index 去除，因为内部不在提交 index，而是 “调用者”自行保存的 “indexOfTodo”

https://img1.sycdn.imooc.com/szimg/676420ba098a552111690712.jpg

即：最终确认删除的 数组成员下标 就是 “indexOfTodo.value”

最终修改后，“调用者”控制组件部分的代码如下

https://img1.sycdn.imooc.com/szimg/6764211509666c9212970655.jpg

--------------------------

最后，在一般情况下，数组成员的删除，不应是给该数组成员 标记某个属性，如你这里的

https://img1.sycdn.imooc.com/szimg/67642152091dac8610560621.jpg

而是真实从该数组内删除

所以可以通过 JS 原生的 Array.prototype.splice 函数 进行删除

    splice 函数 使用方法如下

        两个参数，

        参数1：要删除的数组成员 起始下标，（假设为 S），

        参数2：要删除的长度（假设为 C）

        即语义化理解为，从数组的 第 S 个成员开始，删除 C个成员。

所以，修改后的代码如下图所示：

https://img1.sycdn.imooc.com/szimg/6764227b09a05b2210750218.jpg

从 indexOfTodo.value 的下标开始，删除 1个，即删除指定下标的成员

-----------------------------------------------------

经过上方的修改后，即可将下方用于 标记“已删除”状态的部分去除

https://img1.sycdn.imooc.com/szimg/676422e60998cf1914260710.jpg

-------------------------------------------------------------------------------

最终修改后，

todoList.vue 完整代码

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
<script setup>
import {ref} from "vue";
 
const color = ref("#000000");
const day = ref();
const todo = ref();
 
const list = ref([
    {
        color: "#55b74c",
        day: "今天",
        todo: "要上班",
        complete: true,
        del: false,
    },
    {
        color: "#3a48fa",
        day: "明天",
        todo: "要上班",
        complete: false,
        del: false,
    },
    {
        color: "#9b3ec0",
        day: "后天",
        todo: "还是要上班",
        complete: false,
        del: false,
    },
]);
 
const addTodo = function () {
    list.value.push({
        color: color.value,
        day: day.value,
        todo: todo.value,
        complete: false,
        del: false,
    });
    color.value = "#000000";
    day.value = "";
    todo.value = "";
};
 
const completeTodo = function (index) {
    console.log("completeTodo");
    list.value[index].complete = true;
};
 
import ConFrame from "@/components/ConFrame.vue";
import MyInput from "@/components/input.vue";
import MyDelete from "@/components/delete.vue";
 
const ConFrameShow = ref(false);
const ConFrameCallback = function (msg) {
    ConFrameShow.value = false;
    console.log(msg);
};
 
const ConFrameToShow = function () {
    ConFrameShow.value = true;
};
 
const MydeleteShow = ref(false);
 
const indexOfTodo = ref();
const deleteTodo = function (index) {
    indexOfTodo.value = index;
    MydeleteShow.value = true;
};
 
const deleteTodoConfirm = function () {
    MydeleteShow.value = false;
    list.value.splice(indexOfTodo.value, 1)
};
const deleteTodoCancel = function () {
    MydeleteShow.value = false;
};
</script>
 
<template>
    <div class="container">
        <h1>代办事项 {{ day }}</h1>
        <button @click="ConFrameToShow">添加代办事项</button>
        <div class="option"></div>
        <ul class="list">
            <!--Vue3中v-if权限比v-for高-->
            <template v-for="(item, index) in list">
                <li
                        :style="item.complete === true ? 'text-decoration: line-through;' : ''"
                        @click="completeTodo(index)"
                >
                    <div class="color" :style="'background-color:' + item.color"></div>
                    <span>{{ item.day }}</span>
                    <span>{{ item.todo }}</span>
                    <div class="del" @click.stop="deleteTodo(index)">*</div>
                </li>
            </template>
        </ul>
    </div>
 
    <ConFrame
            :isShow="ConFrameShow"
            title="新增代办事项"
            @close="ConFrameCallback"
    >
        <MyInput class="color" label="颜色" type="color" v-model="color"/>
        <MyInput class="day" label="哪天" placeholder="请输入哪天" v-model="day"/>
        <MyInput
                class="todo"
                label="要做什么"
                placeholder="请输入要做什么"
                v-model="todo"
        />
 
        <button class="addTodo" @click="addTodo">添加事项</button>
    </ConFrame>
 
    <MyDelete
            v-if="MydeleteShow"
            @del="deleteTodoConfirm"
            @cancel="deleteTodoCancel"
    />
</template>
 
<style scoped>
.container {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}
 
.list {
    li {
        display: flex;
        margin: 20px;
        cursor: pointer;
 
        &:hover {
            background-color: antiquewhite;
        }
 
        .color {
            width: 20px;
            height: 20px;
            margin-right: 20px;
        }
 
        .del {
            margin-left: auto;
        }
    }
}
 
.option {
    display: flex;
 
    .color {
        width: 30px;
        height: 30px;
    }
 
    .day,
    .todo,
    .addTodo {
        padding: 5px 10px;
    }
}
 
.option input:focus {
    outline: none;
}
 
.option .addTodo {
    cursor: pointer;
}
</style>


delete.vue （删除组件）完整代码

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
<script setup>
import {defineProps, defineEmits, ref, watch} from "vue";
 
const count = ref(10);
const updateCount = function () {
    count.value--;
    if (count.value === 0) {
        clearInterval(timer);
        cancel();
    }
};
let timer = setInterval(updateCount, 1000);
 
const emits = defineEmits(["del", "cancel"]);
const del = function () {
    emits("del");
};
const cancel = function () {
    emits("cancel");
};
</script>
 
<template>
    <div class="masking"></div>
    <div class="popover">
        <div class="popover-con">
            <div class="popover-info">
                <div class="content">
                    <p>警告（{{ count }}秒后自动取消）</p>
                    <p>是否要删除当前选项？</p>
                </div>
                <div class="operateBar">
                    <button @click="cancel">取消</button>
                    <button @click="del">确认</button>
                </div>
            </div>
        </div>
    </div>
</template>
 
<style scoped>
.masking {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.3);
}
 
.popover {
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    position: fixed;
    display: table;
 
    .popover-con {
        position: relative;
        z-index: 9999;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
 
        .popover-info {
            border-radius: 5px;
            text-align: left;
            display: inline-block;
            width: 300px;
            height: 100px;
            background: #fff;
 
            .operateBar {
                padding: 0 10px;
                height: 38px;
                line-height: 38px;
                border-bottom: 1px solid #ebeef5;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                background-color: #379aff;
 
                button {
                    color: #ffffff;
                    width: 150px;
                    height: 30px;
                    background-color: #379aff;
                    border: none;
                }
            }
        }
 
        .content {
            width: 100%;
            margin: 10px 20px;
 
            p {
                font-size: 14px;
            }
        }
    }
}
</style>


1 回复 有任何疑惑可以回复我~
收起回答
取消 回复
西一凹 2024-12-18 17:48:30

https://img1.sycdn.imooc.com/szimg/67629a61096b5e9115760960.jpg

QQ群在这个位置

0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
西一凹 2024-12-18 17:10:22

同学你好，你要加课程的官方qq群吗，你可以在群内将完整的项目打包发给我，我帮你看看具体的原因。

0 回复 有任何疑惑可以回复我~
收起回答
  • 西一凹 #1 
    node_modules 这么目录不需要打包进去哈
    回复 有任何疑惑可以回复我~ 2024-12-18 17:10:51
  • 提问者 声声入耳 #2 
    官方qq群在哪？
    回复 有任何疑惑可以回复我~ 2024-12-18 17:38:14
  • 提问者 声声入耳 #3 
    老师，我没找到qq群在哪
    回复 有任何疑惑可以回复我~ 2024-12-18 17:40:21
点开查看后面2条评论
取消 回复

相似问题

会签、加签、代办、分阅功能如何实现。
2524 0 2
添加新应用遇到的问题
765 0 4
老师，我在添加好友这里出现了一个bug
728 0 7
在添加减少库存的时候，感觉这个方法不严谨
604 1 2
如果切换角色后权限不同 怎么清空之前添加动态路由。
1132 0 6

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
Electron+Vue3+AI+云存储--实战跨平台桌面应用
  • 参与学习       141    人
  • 解答问题       38    个

Electron+Vue3+AI+云存储--实战跨平台桌面应用

了解课程

本课精华内容

问答

我没发现bug在哪

140 3

无法接入模型

129 1

作业遇到的bug，添加代办事项后的todo进行删除，有时候会停在9s，无法实现自动退出了，只要添加过代办事项，一定停在9s

154 10

安装 electron

377 7

preload预加载脚本加载不成功

146 6

查看更多本课问答
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号