vue移动端筛选组件

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

先出效果

简单录屏

组件代码

组件使用

// 模板引用 

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

  //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开源中国的笔记里，因为只是自己看所以写的比较乱。把这些代码写下来发布后能给自己一个约束，要写的完整并且能让其他人看得懂，能让自己学到更多的。