vue更多篩選項小組件使用詳解
本文實例為大傢分享瞭vue更多篩選項小組件的實現方法,供大傢參考,具體內容如下
效果:
就是一個簡單的小效果,當有很多篩選條件時,默認隻展示幾項,不會覺得很冗餘,有需要可以點擊展開,進行更過的條件篩選。並且能夠自動判斷界面的尺寸,決定是否需要更多篩選項。直接把“查詢、重置”內置到組件裡面瞭,便於組件樣式的實現,還可以進行插槽。
正常大屏
分辨率變小
可見出現瞭更多篩選的按鈕,可以點擊下拉
插槽
代碼:
<template> <div :class="['colla-wrap']" ref="filter"> <div class="colla-box" ref="filterCont" :style="maxWidth ? 'max-width:' + maxWidth: ''"> <slot></slot> </div> <div class="ctrl"> <div class="deal-b" > <el-button size="mini" type="primary" icon="el-icon-search" @click="clickSearch">查詢</el-button> <el-button size="mini" plain icon="el-icon-refresh-left" @click="clickReset">重置</el-button> <slot name="moreBtns"></slot> <div class="deal-b" @click="showCollapse" v-if="autoExpend.more"> <i class="el-icon-arrow-down turnDown" v-if="!autoExpend.collapseVisible"></i> <i class="el-icon-arrow-up turnUp" v-if="autoExpend.collapseVisible"></i> <div v-if="!autoExpend.collapseVisible" class="more-words">更多篩選項</div> <div v-if="autoExpend.collapseVisible" class="more-words">收起篩選</div> </div> </div> </div> </div> </template> <script> export default={ data(){ return{ collapseData:{ collapseVisible:false }, //自動折疊顯示更多篩選項 autoExpend:{ more:false, collapseVisible:false, hasTop:false, hasFilter:false }, } }, props:['maxWidth'], mounted(){ this.watchScrollHeight() window.addEventListener("resize", () => { this.watchScrollHeight() }); }, methods:{ clickSearch(){ this.$emit('clickSearch') }, clickReset(){ this.$emit('clickReset') }, showCollapse(){ this.methods('showCollapse') }, showCollapse(){ this.autoExpend.collapseVisible = !this.autoExpend.collapseVisible this.$refs.filterCont.style.height = this.autoExpend.collapseVisible?'auto':'50px' } //嘗試監控這個高度 watchScrollHeight(){ let filter = this.$refs.filter; if(filter){ this.$nextTick(() => { this.autoExpend.more = $(filter).find(".colla-box")[0].scrollHeight > 50; }) } //判斷下面有沒有元素節點 決定這個插槽是否顯示 //判斷正常搜索框部位插槽 if(this.$refs.filterCont&&this.$refs.filterCont.childNodes.length){ this.autoExpend.hasFilter = true } } } } </script> <style scoped lang="scss"> .colla-wrap{ width: 100%; .colla-box{ 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; } } } } } </style>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。