vue 写筛选

效果

image.png

<template>
  <div class="filter">
    <div class="filter-item" v-for="item in filterList" :key="item.key" @click="selectFilter(item)" :class="type == item.key ? 'active' : ''">
      <div class="title">{{ item.title }}</div>
      <span v-if="item.key !== 'created_time'">
        <b class="b1">
          <CaretUpOutlined :style="{ color: (sort === 'asc' && type === item.key) ? '#ff3e13' : '' }" />
        </b>
        <b class="b2">
          <CaretDownOutlined :style="{ color: (sort === 'desc' && type === item.key) ? '#ff3e13' : '' } " />
        </b>
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from vue

const type = ref('')
const sort = ref('asc')

const filterList = [
    {
      key: 'created_time',
      title: '最新上架'
    }, {
      key: 'activity_rate',
      title: '利润率'
    }, {
      key: 'real_month_sale',
      title: '销售量'
    }
] 

const selectFilter = (item) => {
    if (item.key == 'created_time') {
      sort.value = 'asc'
    } else {
      if (type.value == item.key) {
        sort.value = sort.value === 'desc' ? 'asc' : 'desc'
      } else {
        sort.value = 'desc'
      }
    }
    type.value = item.key
    
    getGoodsList({page: 1, type: type.value, sort: sort.value})
}
</script>

<style lang="less" scoped>
.filter {
  display: flex;
  line-height: 30px;
  padding: 10px;
  margin-bottom: 20px;
  background: #ffffff;
  &-item {
    display: flex;
    border-right: 1px solid #ccc;
    cursor: pointer;
    padding: 0 20px;
    &.active {
      .title {
        color: #ff3e13;
      }
    }
    span {
      position: relative;
      display: inline-block;
      width: 14px;
      margin-left: 3px;
      b {
        position: absolute;
        &.b1 {
          top: -4px;
        }
        &.b2 {
          bottom: -4px;
        }
      }
    }
  }
}
</style>