vue 移动端顶部筛选组件

桑榆呀

已于 2024-09-13 14:31:50 修改

阅读量166

点赞数 7

文章标签： vue.js javascript 前端

于 2024-09-13 14:29:40 首次发布

本文链接：https://blog.csdn.net/weixin_43337299/article/details/142209195

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、效果图

筛选

关键字搜索

二、代码

1.组件

代码如下（示例）：

<!-- 顶部筛选 -->
<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">
          <div v-if="k == filterIndex && v.type == null">
            <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>
          </div>
          <div v-if="k == filterIndex && v.type == 'seach'" @click.stop="filterShow = true">
            <div class="keywords">
              <el-input v-model="v.value" :placeholder="'输入' + v.name" clearable />
              <el-button class="flex-1" type="primary" @click.stop="selectItem(v.key, v.value)">查询</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

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

      data: [],

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

      // 是否展开
      filterShow: false,

      //已选中
      filterSelect: {
      }
    }
  },
  // filterData:所有的数据(必填)   currenSelect:已选在数据(可选)
  props: ['filterData', 'currenSelect', 'showFilterTop'],
  mounted() {
    var total = this.filterData;
    console.log(total, 'total');
    if (total) {
      this.data = this.filterData;
      // 初始化
      total.forEach(element => {
        var key = element['key'];
        console.log(key, 'key');
        var value = element['options'] ? element['options'][0]["key"] : "";
        this.filterSelect[key] = value;
      });
    }
    if (this.showFilterTop) {
      this.filterIndex = this.showFilterTop;
      this.filterShow = true;
    }
  },
  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";
    },
    // 输入框
    inputItem(k, kk) {
      this.filterSelect[k].value = kk;
      this.$emit("select", this.filterSelect);
      this.filterShow = false;
      this.filterIndex = "-1";
    }

  }
}
</script>

<style lang="scss" scoped>
.filter-box .filter {
  height: 3rem;
  z-index: 101;
  background-color: #fff;
  display: flex;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0;
  box-shadow: 5px 1px 5px 0 rgba(0, 0, 0, 0.2)
}

.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%;
  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;
  max-height: 18rem;
  overflow: auto;
  position: fixed;
  width: 100%;
  top: 3rem;
}

.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: #EEF9FE;

  span {
    color: #12ADF1;
  }
}

.keywords {
  padding: 1rem 0.5rem;
  display: flex;

  .el-input {
    margin-right: 0.5rem;
  }

  :deep(.el-input__inner) {
    border: none !important;
  }
}
</style>

2.使用

代码如下（示例）：

<!-- 筛选 -->
<template>
    <div class="containerWrap">
        <div class="sectionWrap" style="margin: 0;">
            <div class="section-select-top" style="height: 3rem;">
                <!-- 使用 -->
                <Filtercon :filterData="filterData" :currenSelect="currenSelect" @select="selectItem"></Filtercon>
            </div>
        </div>
    </div>
</template>
<script>
//引入组件
import Filtercon from '@/components/Filter/filter.vue'
export default {
    name: "x",
    
    components: {
        Filtercon //注册组件
    },
    data() {
        return {
            filterData: [],
            currenSelect: {},
        };
    },
    watch: {

    },
    created() {

        this.setFilter()
    },
    computed: {

    },
    destroyed() {

    },
    mounted() {
    },
    methods: {
        setFilter() { //设定选项内容
            var data = [
                {
                    name: '地区',
                    key: 'dq',
                    options: [
                        { "key": "0", "name": "不限" },
                        { "key": "1", "name": "杭州市" },
                        { "key": "2", "name": "宁波市" },
                        { "key": "3", "name": "温州市" }
                    ]
                },
                {
                    name: '县（市）',
                    key: 'xs',
                    options: [
                        { "key": "0", "name": "不限" },
                        { "key": "1", "name": "x区" },
                        { "key": "2", "name": "y区" },
                        { "key": "3", "name": "z区" }
                    ]
                },
                {
                    name: '类型',
                    key: 'splx',
                    options: [
                        { "key": "0", "name": "全部" },
                        { "key": "1", "name": "x" },
                        { "key": "2", "name": "y" },
                        { "key": "3", "name": "z" }
                    ]
                },
                {
                    name: '查找类别',
                    key: 'czlb',
                    options: [
                        { "key": "1", "name": "项目名称" },
                        { "key": "2", "name": "当前状态" },
                    ]
                },
                {
                    name: '关键字',
                    key: 'keywords',
                    type: 'seach', // type:seach搜索框
                    value: '',
                },
            ];
            this.filterData = data;
            // 如果想默认选中值。不设置则默认选中第一项
            this.currenSelect = {
                'xinzi': "3"
            }

        },
        // 筛选中某项
        selectItem(query) {
            console.log(query, 'query');
            // 根据业务需要进行数据请求即可
            // 打印出对象: {dq: "0", xs: "0", splx: "2", czlb: "0", keywords: '关键字'} 
        },

    }
};
</script>
<style lang="scss"></style>