vue选择器组件,vue列表组件
这篇文章主要为大家详细介绍了某视频剪辑软件更多筛选项小组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件更多筛选项小组件的实现方法，供大家参考，具体内容如下
效果：
就是一个简单的小效果，当有很多筛选条件时，默认只展示几项，不会觉得很冗余，有需要可以点击展开，进行更过的条件筛选。并且能够自动判断界面的尺寸，决定是否需要更多筛选项。直接把"查询、重置"内置到组件里面了，便于组件样式的实现，还可以进行插槽。
正常大屏
分辨率变小
可见出现了更多筛选的按钮，可以点击下拉
插槽
代码：
模板
div:class=[ colla-wrap ] ref= filter
div class= colla-box ref= filter cont :style= maxWidth？最大宽度：最大宽度：
插槽/插槽
/div
div class=ctrl
div class=deal-b
El-button size= mini type= primary icon= El-icon-search @ click= click search 查询/el-button
El-button size= mini plain icon= El-icon-refresh-left @ click= click reset 重置/el-button
slot name=moreBtns/slot
div class= deal-b @ click= show collapse v-if= auto expend。“更多”
I El-icon-arrow-down turn down v-if=！autoExpend.collapseVisible/i
I= El-icon-arrow-up转到 v-if= autoexpend。折叠可见/I
div v-if=！自动消费。折叠可见 class= more-words 更多筛选项/div
div v-if= autoexpend。折叠可见 class= more-words 收起筛选/div
/div
/div
/div
/div
/模板
脚本
导出默认值={
data(){
返回{
折叠数据：{
collapseVisible:false
},
//自动折叠显示更多筛选项
自动扩展：{
更多：假的，
collapseVisible:false，
hasTop:假的，
hasFilter:false
},
}
},
道具：[maxWidth]，
已安装(){
this.watchScrollHeight()
窗户。addevent侦听器( resize ，()={
this.watchScrollHeight()
});
},
方法：{
单击搜索(){
这个$emit(点击搜索)
},
单击重置(){
这个$emit(点击重置)
},
showCollapse(){
这个。方法(“显示折叠”)
},
showCollapse(){
这个。自动消费。可见折叠=！这个。自动支出。可见折叠
这个参考文献。过滤器续。风格。身高=这个。自动消费。可见折叠？自动：“50px”
}
//尝试监控这个高度
watchScrollHeight(){
让过滤器=这个. refs.filter
如果(过滤器){
这个. nextTick(()={
this.autoExpend.more=$(filter).查找(。colla-box)[0].scrollHeight 50
})
}
//判断下面有没有元素节点决定这个插槽是否显示
//判断正常搜索框部位插槽
如果（这个参考文献。过滤器控制这个。$参考文献。过滤器续。子节点。长度){
this.autoExpend.hasFilter=true
}
}
}
}
/脚本
样式范围的语言=scss 。折叠包装{
宽度：100%;colla-box{
最大宽度：计算(100%-400像素);
浮动：左；
框大小：边框-框；
溢出：隐藏；
高度：50px
div，按钮{
浮动：左；
右边距：20px
边距-底部：20px
}
}。ctrl{
显示器：flex
align-items:flex-start；
对齐-内容：灵活开始；
颜色：# 409EFF
按钮{
右边距：20px
}。交易-b{
显示器：flex
align-items:flex-start；
柔性包装：nowrap。交易-b{
右边距：0;
边距-底部：0;
边距-顶部：5px
显示器：flex
对齐-项目：居中；
光标：指针；
颜色：# 409EFF。更多单词{
最小宽度：75像素
}
我{
颜色：# 409EFF
右边距：5px
}
}
}
}
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。