这篇文章主要为大家详细介绍了vue更多筛选项小组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue更多筛选项小组件的实现方法，供大家参考，具体内容如下
就是一个简单的小效果，当有很多筛选条件时，默认只展示几项，不会觉得很冗余，有需要可以点击展开，进行更过的条件筛选。并且能够自动判断界面的尺寸，决定是否需要更多筛选项。直接把“查询、重置”内置到组件里面了，便于组件样式的实现，还可以进行插槽。
正常大屏
分辨率变小
可见出现了更多筛选的按钮，可以点击下拉
插槽
代码：
<div> <div class="colla-box"> </div><div class="ctrl"> <div class="deal-b"> 查询重置<div class="deal-b"> <i class="el-icon-arrow-down turnDown"></i><i class="el-icon-arrow-up turnUp"></i><div class="more-words">更多筛选项</div><div class="more-words">收起筛选</div></div></div></div></div> .colla-wrap{ width: 100%; .colla-bo<b style="color:transparent">本文来源gao@!dai!ma.com搞$$代^@码!网!</b>x{ max-width: calc(100% - 400px); float: left; box-sizing: border-box; overflow: hidden; height: 50px; >div,button{ float: left; margin-right: 20px; margin-bottom: 20px; } } .ctrl{ display: flex; align-items: flex-start; justify-content: flex-start; color: #409EFF; button{ margin-right: 20px; } .deal-b{ display: flex; align-items: flex-start; flex-wrap: nowrap; .deal-b{ margin-right: 0; margin-bottom: 0; margin-top: 5px; display: flex; align-items: center; cursor: pointer; color: #409EFF; .more-words{ min-width: 75px; } i{ color: #409EFF; margin-right: 5px; } } } } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
以上就是vue更多筛选项小组件使用详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue更多筛选项小组件使用详解
转载请注明原文链接：vue更多筛选项小组件使用详解
