需求:导航栏宽高一定,能够容纳两行导航标签,标签宽度随着内容改变。当标签过多的时候,自动在导航栏末尾出现下拉按钮,点击后可下拉显示多余的标签。
操作dom
容器overflow设置成hidden,获取容器内的所有dom(标签)底部到容器顶部的距离、超出容器高度的dom移动到下拉按钮后的容器中。
操作数据(Angular)
- 后台读取到的导航标签存放在this.labels中
- 按照一定的标准切分this.labels数组。比如考虑每个标签名称的字数大小、内外边距距离、浮动值等。将this.labels数组中的标签对象分别放在this.labelNav和this.labelDrilldown中。
- View要做的,就是渲染出正常显示的两栏导航标签(this.labelNav)以及下拉按钮/菜单组(this.labelDrilldown)。并且可以根据this.labelDrilldown内是否有值、结合ngIf选择要不要显示下拉按钮