仿（京东、淘宝）顶部分类展示列表

仿（京东、淘宝）顶部分类展示列表

人生最精彩的不是实现梦想的瞬间，而是坚持梦想的过程

效果图如下

最近在项目中遇到一个分类展示的需求，看了别人的案例总是觉得有些看不懂，所以自己封装了一个组件去使用。这个东西我们一般都是封装起来去使用，所以本人也封装了起来，供大家使用。

<template>
  <div class="search-condition-comp">
    <div class="title">{{ typeCondition }}: </div>
    <div class="subcondition">
      <span
        v-for="item in typeLists"
        :key="item.value"
        class="search-type"
        :class="{'search-type-current': item.value === searchCondition}"
        @click="changeTypeCondition(item.value)"
      >
        <span :class="{'search-current': item.value === searchCondition}">
          {{ item.label }}
        </span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  props: {
    typeCondition: {
      type: String,
      default: '',
    },
    typeLists: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchCondition: '',
    }
  },
  methods: {
    changeTypeCondition(val) {
      this.searchCondition = val
      this.sendParams(this.searchCondition)
    },
    sendParams(nv) {
      const params = JSON.parse(JSON.stringify(nv))
      this.$emit('sendSearchCondition', params)
    },
  },
}
</script>

<style  scoped>
.search-condition-comp{
  padding-left: 50px;
  width: calc(100% - 356px);
  font-size: 14px;
  position: relative;
  overflow: hidden;
  margin-bottom: 11px;
  /* margin-top: 11px; */
  display: flex;
  background-color: #DDDDDD;
}
.title {
    margin-right: 19px;
    white-space: nowrap;
    font-size: 14px;
    margin-top: 5px;
    float:left;
  }
  .subcondition {
    text-align: left;
    float:left;
  }
  .search-type {
    min-width: 70px;
    height: 24px;
    line-height: 24px;
    border: 1px solid transparent;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 400;
    float: left;
    padding: 2px 17px;
    text-align: center;
    margin: 0 22px 13px 0;
    cursor: pointer;
  }
  .en_width {
    min-width: 67px;
  }
  .search-type-current {
      border: 1px solid #39EFFF !important;
      background: transparent;
    }
    .search-current {
      color: #242C3B;
      background: linear-gradient(180deg,rgba(57,239,255,1) 0%, rgba(58,165,255,1) 100%); 
      background-clip:text;
      -webkit-text-fill-color:transparent;
      transform: all 0.5s;
    }
</style>

用例：

说明：😐 😐
props

参数	说明	类型	可选值	默认值
type-condition	分类命名title，如“分类1”	String	-	‘’
type-list	类别数据	Array	-	[]
sendSearchCondition	Event事件	event	-	-

注意：看不懂可以留言（如果有帮助请点个赞让更多的人看到）