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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ant-design-vue中的select选择器,对输入值的进行筛选操作

    今天在设计一个标签(采用的是Select 选择器中的标签那一个)时,从后台返回了数据,但是在输入值时,没有对回显的值进行过滤匹配,通过查看官方文档,解决了这个问题. 记在这里方便以后查看. <a-form-item label='标签' v-bind="formItemLayout"> <a-select mode="tags" :allowClear="true" :filterOption="filterOptio

  • vue分类筛选filter方法简单实例

    本文实例为大家分享了vue分类筛选filter方法的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title>filter</title> </head> <body> <div id="app"> <ul> <li v-for="item in filterlist"

  • Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条

  • vue input输入框关键字筛选检索列表数据展示

    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo --> <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list

  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-

  • VUE实现移动端列表筛选功能

    最近兴趣所致,打算使用vant搭建一个webapp,由于需要使用列表筛选,没有找到合适组件,于是写了一个简单的功能,权当记录. 效果如下: HTML: <div class="filterbar"> <div class="filterbar-title"> <ul class="title-ul"> <li :class="{'title-li':true, 'current': item.i

  • 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求. 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一

  • 基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

    基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app'> <template v-if='condition.length'> <div> <span>已选中:<span> <span v-for='(item,index) in condition' class='active'>{{item

  • Vue通过input筛选数据

    本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&

  • vue实现前端列表多条件筛选

    本文实例为大家分享了vue实现前端列表多条件筛选的具体代码,供大家参考,具体内容如下 1.先上图: 2.搜索条件绑定的数据是: filterForm:{ schoolName:'',//输入的学校名称 position:'',//选择的区域区域 schoolLevel:"",//选择的学校办别 }, schoolList:[ {schoolName:'青岛市实验高级中学',schoolLevel:"",position:'山东省青岛市城阳区硕阳路69号'}, {sc

随机推荐