Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 5.2 KB

README.md

File metadata and controls

85 lines (65 loc) · 5.2 KB

vue-componentization

vue组件封装

技术栈:vue3+vite

一、右键菜单封装

需求分析

  1. 菜单出现的位置和可见度
  2. 菜单的内容
  3. 菜单的样式
  4. 菜单出现的动画(0->auto用css动画无法显示,需要知道具体的height)

已解决的问题

  1. 右键菜单不显示,右键被浏览器右键占用,在使用onMounted组件挂载时,重复使用了,将js代码中onMounted删去,解决问题
  2. 菜单出现的动画,动态获取菜单的高度
 el.style.height = "auto"; // 设置高度为自动以便获取高度
  const h = el.clientHeight;

地址

ContextMenu

二、模态框封装(弹窗)

需求分析

  1. 弹窗出现的位置和可见度(什么时候应该出现,什么时候应该消失,点击模态框外应不应该消失)
  2. 弹窗的样式
  3. 弹窗里需要有什么内容(标题title,内容content,确认和取消按钮button)
  4. 弹窗出现时界面的行为(阻止用户与界面其他部分交互,直到弹窗关闭)->解决办法:使用遮罩层
  5. 持续时间(如果是提示类弹窗,则需设置持续时间)

已解决的问题

  1. 注意到事件的冒泡处理顺序,使用@click.stop阻止冒泡,修复bug
  2. 小细节错误,是否为undefined的判断,应该直接与undefined比较,而不是字符串'undefined'

地址

Modal

三、轮播图封装

---------------------------------------------------算法---------------------------------------------------

贪心算法

贪心算法是一种在每一步选择中,都采取在当前状态下最好或最优的选项,从而希望导致结果是最好或最优的算法。但最后结果不一定就是最好的状态。比较常见的是找零问题,每一步都找最大面值的零钱,最后可以保证找给的钱的数量最少。

1.最佳邮局设置问题

问题描述:有n户人家坐落在从西向东的一条街上。从街西头向东数,第i户的房子与街西头的距离是H[i]米,(1≤i≤n), H[1]< H[2] < H[3] … < H[n] ,假设街上没有邮局。现在,要在街上建一些邮局使得任一户人家到最近一个邮局的距离不超过1000米。请设计一个O(n)时间的算法以确定最少需要建的邮局数,并给出每个邮局到街西头的距离。

解题代码:

最佳邮局设置问题

2、3. 医院设置问题1、2

问题描述:n个村庄之间的交通图用无向加权图表示,图中的无向边(vi,vj)表示第i个村庄和第j个村庄之间有道路,边上的权表示这条道路的长度。现在要从这n个村庄中选择一个村庄建一所医院. (1)问这所医院应建在哪个村庄,才能使离医院最远的村庄到医院最近。 (2)问这所医院应建在哪个村庄,才能使所有村庄到医院的路径和最短。

解题代码:

医院设置问题1、2

4. 国王游戏问题

问题描述:国王邀请n位大臣玩一个游戏。首先,他让每个大臣在左、右手上面分别写下一个整数,国王自己也在左、右手上各写一个整数。然后,让这n位大臣排成一排,国王站在队伍的最前面。排好队后,所有的大臣都会获得国王奖赏的若干金币,每位大臣获得的金币数分别是:排在该大臣前面的所有人的左手上的数的乘积除以他自己右手上的数,然后向下取整得到的结果。 国王不希望某一个大臣获得特别多的奖赏,所以他想请你帮他重新安排一下队伍的顺序,使得获得奖赏最多的大臣,所获奖赏尽可能的少。注意,国王的位置始终在队伍的最前面。

解题代码:

国王游戏问题

5. 看比赛问题

问题描述:有n场直播比赛,每场比赛的开始、结束时间已知,求最多可以看多少场比赛。每场比赛从开头完整看到结尾才算观看完一场比赛。

解题代码:

看比赛问题

6. 果子合并问题

问题描述:现有n堆果子,每一堆果子有一个质量wi,现要把所有果子按照如下规则合并成一堆: (1) 每次只能选择某两堆合并成一堆; (2) 每次合并消耗体力值为两堆果子质量之和; (3) 问合并成一堆所花费的最小体力值是多少。

解题代码:

果子合并问题

7. 排队打水问题

问题描述:有 n 个人排队到 1 个水龙头处打水,第 i 个人装满水桶所需的时间是 Ti,请问如何安排他们的打水顺序才能使所有人的平均等待时间最小? 输入:第一行包含整数n; 第二行包含n个整数,其中第i个整数表示第i个人装满水桶所花费的时间Ti。

解题代码:

排队打水问题