更多菜单详细设计
更多菜单详细设计
需求背景
目前产品中每个菜单的长度都是固定的，而且当用户浏览器分辨率过低的时候、或者用户菜单配置过多，在低分辨率下会存在菜单展示不全的情况，此时需要通过“更多”菜单，当浏览器可视区域不足以展示目标菜单的话，将其收入“更多”菜单中。
需求分析
- 首先需要解决的就是获取到窗口的可视区域大小
- 原有菜单实现是每个菜单的宽度是固定的，如果菜单的字数过多的话，就会出现菜单展示不全的问题，所以菜单长度不能固定，需要设置边距自动撑开
- 获取到每个菜单的宽度，计算当前窗口容器的可视宽度可以容纳的菜单数量
- 将放不下的菜单放入“更多”菜单中
- 各种边界场景（更多菜单的展示判断、下拉菜单用户名机构名过长隐藏）
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 一叶凉夏！
相关推荐
2023-01-03
game
Tic Tac Toe项目总结1.v-for使用报错：Cannot use v-for on stateful component root element because it renders multiple elements. 不能在根元素（root element）使用 v-for，因为v-for是个循环体呈现多个元素，v-for在根元素上导致无法渲染。 ==使用v-for的时候需要在外层加上一个div不能让他处在根元素上== 正确示例： 12345<template id="block1"> <div class="body"> <div class="box1" v-for="item in total_stats1" @click="">{{item.id}}</div> ...
2023-01-03
problem
这里是问题汇总1.关于组件化问题：报错内容: did you register the component correctly? For recursive components, make sure to provide the "name" option. 翻译过来是： 您是否正确注册了组件？对于递归组件，请确保提供“name”选项 出现问题的原因： 所渲染的Vue实例不能在组件前面，若在前面创建实例，则无法读取到后面创建的组件。 即new Vue()==实例化Vue要放在后面== 此时问题解决，同时网上还会有引起类似报错的操作： 如果全局注册,组件名称问题: 若是组件名称是大写,Vue会报错. 可以修改为下面两种: 修改组件名称为小写,即mycomponent即可解决. 如使用局部注册,则是components少写了个s: 2.注意string类型和number类型比较会出问题1234567891011for (let item of this.childstats) { ...
2023-01-03
Tic Tac Toe
Tic Tac Toe小游戏目前实现的功能： 初始化3×3的子组件网格 绑定网格id 点击网格，向父组件传递id值 父组件接收到id，会对其进行计数，初始为0接受到一次id，计数加一（第一次接受id，count =1） 判断逻辑，如果count为奇数，且clickstate为1，修改其player值为1为偶数就修改为2,clicktate值置0 判断逻辑，如果点击过该网格（clickstate ==...
2023-01-03
book
书籍管理123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div id="app"> <table border="1" cellspacing="0"...
2023-05-08
Aicode案例分享
一、转化对象数组的格式1. 需求：有一个对象数组，需要将该数组转化为后端需要的格式数组： 123456789101112131415161718192021[ { enrollTaskId: 1105, label: '对象1' }, { id: 3, parentId: 1105, label: '对象2' }, { id: 4, parentId: 1105, label: '对象3' }, { id: 66, parentId: 1200, label: '对象4' } ] 转化后的数组： 12345678910[ { enrollTaskId: 1105, channelIds: [3, 4] }, ...
2023-03-13
nginx
nginxnginx虚拟主机配置文件(conf.d)如果虚拟主机配置多了，需要将配置文件拆分出来，此时可将文件放在conf.d中，建立各自对应的配置文件。 让上述配置生效的话需要在nginx.conf的http块中加上include conf.d/*.conf;