实现思路
实现组件的布局。
绑定监听事件和销毁监听事件
高度判断和图标的显示与隐藏
实现组件的布局
外层盒子(限制高度)、折叠的图标或者文字(用来显示和隐藏多余的行)、插槽(挖个坑给搜索行占位)。
事件绑定与事件销毁
需要绑定一个resize事件。resize事件是在窗口大小发生变化时就会触发。resize事件触发我们就要重新计算盒子查询项的高度,判断是否需要折叠或者显示。mounted生命周期触发计算组件实例高度。并计算查询项高度。resize事件要在组件销毁前的生命周期中进行销毁。不影响其他组件。
立即学习“前端免费学习笔记(深入)”;
高度判断和图标的显示与隐藏
首先图标盒子绑定状态,用来显示和隐藏。 其次外层盒子需要设置一个高度临界点,即多大高度时不折叠,超过了这个高度就折叠。盒子高度需要你计算,比如,你需要4行不折叠,需要算出四行的高度并加上图标的高度。如果大于高度则显示图标、如果小于隐藏图标。
完整代码
布局
css代码
script
组件使用
{{item}}










