vue移动端筛选组件

最近的项目中使用筛选写的比较多，每次都要做一些修改才能用到项目上，而且还要看一看代码才能改动。这次又用到，就顺便写成不依赖其他UI框架，下次使用时方便直接引用，再也不想造轮子了！👀

先出效果

简单录屏

组件代码

<template>
  <div class="filter-box">
    <div class="filter flex-row">
      <p v-for="(v, k) in data" :key="k" :class="filterIndex==k? 'active':''" @click="itemClicked(k)">{{v.name}}</p>
    </div>
    <div class="filter-overlay" :class="filterShow? 'active':''" @click="filterShow=false; filterIndex='-1'">
      <div v-if="filterShow" class="filter-column">
        <div v-for="(v, k) in data" :key="k">
          <block v-if="k==filterIndex">
            <p v-for="(vv, kk) in v['options']" :key="kk" :class="filterSelect[v.key] == vv.key ?'active':''" @click.stop="selectItem(v.key ,vv.key)">
              <span>{{vv.name}}</span>
            </p>
          </block>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {

      data: [],

      // 当前点击选中的筛选类目
      filterIndex: "-1",

      // 是否展开筛选项
      filterShow: false,

      //已选中的项
      filterSelect: {
      }
    }
  },
  // filterData:所有的数据(必填参数)   currenSelect:已选在数据(可选参数)
  props: ['filterData', 'currenSelect'],
  onLoad() {
    
    var total = this.filterData;
    console.log(total);
    if (total) {
      this.data = this.filterData;
      // 初始化默认选中的选项
      total.forEach(element => {
        var key = element['key'];
        console.log(key);
        var value = element['options'] ? element['options'][0]["key"]: "";
        this.filterSelect[key] = value;
      });
    }
  },
  methods: {
    // 筛选条目被点击
    itemClicked(k) {
      this.filterIndex = k;
      if (!this.filterShow) {
        this.filterShow = true;
      }
    }, 

    // 选中了某一个选项
    selectItem(k, kk) {
      this.filterSelect[k] = kk;
      this.$emit("select", this.filterSelect);
      this.filterShow = false;
      this.filterIndex = "-1";
    }

  }
}
</script>

<style scoped>
.filter-box .filter {
  height: 45px;
  z-index: 101;
  background-color: #fff;
}
.filter-box .filter p {
  text-align: center;
  flex: 1;
  text-indent: -5px;
}
.filter-box .filter p::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-left: solid 1px #797979;
  border-top: solid 1px #797979;
  transform: rotate(-135deg);
  position: relative;
  top: -3px;
  left: 5px;
  transition: all .3s ease 0s;
}
.filter-box .filter p.active::after {
  transform: rotate(45deg);
  top: 0;
}
.filter-box .filter-overlay {
  position: fixed;
  width: 100%;
  height: 0;
  top: 45px;
  left: 0;
  background-color: transparent;
  transition: background-color 0.5s ease;
  z-index: 100;
}
.filter-box .filter-overlay.active {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
}
.filter-box .filter-column {
  z-index: 101;
  background-color: #fff;
}
.filter-box .filter-column p {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
}
.filter-box .filter-column p span {
  font-size: 16px;
  color: #aaa;
}

.filter-box .filter-column p.active{
  background: #f8f8fa;
  color: #4b4b4b;
}
</style>

组件使用

// 模板引用 
<template>
  <div class="job index">
    <Filter :filterData="filterData" @select="selectItem"></Filter>
  </div>
</template>

如果需要设置默认参数 可以使用currenSelect

<Filter :filterData="filterData" :currenSelect="currenSelect" @select="selectItem"></Filter>

  //JS：
  mehtods: {
    setFilter() {
      var data = [
        {
          name: '经验', 
          key:'jingyan', 
          options: [
            {"key": "0", "name": "不限"},
            {"key": "1", "name": "应届生"}, 
            {"key": "2", "name": "1年以内"}, 
            {"key": "3", "name": "1-3年"}
          ]
        },
        {
          name: '学历', 
          key:'xueli', 
          options: [
            {"key": "0", "name": "不限"},
            {"key": "1", "name": "初中及以下"}, 
            {"key": "2", "name": "中专"}, 
            {"key": "3", "name": "高中"}
          ]
        },
        {
          name: '薪资', 
          key:'xinzi', 
          options: [
            {"key": "0", "name": "不限"},
            {"key": "1", "name": "3K以下"}, 
            {"key": "2", "name": "3-5K"}, 
            {"key": "3", "name": "5-8K"}
          ]
        },
        {
          name: '经验', 
          key:'jingyan', 
          options: [
            {"key": "0", "name": "不限"},
            {"key": "1", "name": "无经验"}, 
            {"key": "2", "name": "1年以内"}, 
            {"key": "3", "name": "1-3年"}
          ]
        },
        {
          name: '行业', 
          key:'hangye', 
          options: [
            {"key": "0", "name": "不限"},
            {"key": "1", "name": "金融"}, 
            {"key": "2", "name": "互联网"}, 
            {"key": "3", "name": "服务"}
          ]
        },
      ];
      this.filterData = data;
      // 如果想默认选中值。不设置则默认选中第一项
      this.currenSelect = {
        'xinzi': "3"
      }

    },
    // 筛选中某项
    selectItem(query) {
      console.log(query);
      // 根据业务需要进行数据请求即可
      // 打印出对象: {jingyan: "0", xueli: "0", xinzi: "2", hangye: "0"} 
    },
  }

结语

前端的轮子还是比较多的，需要经常总结的。之前经常看别人写博客，之前一直没有静下来写，只是随手记在OSChina开源中国的笔记里，因为只是自己看所以写的比较乱。把这些代码写下来发布后能给自己一个约束，要写的完整并且能让其他人看得懂，能让自己学到更多的。