技術標籤：筆記vue元件化vue.js

仿（京東、淘寶）頂部分類展示列表

人生最精彩的不是實現夢想的瞬間，而是堅持夢想的過程

效果圖如下

最近在專案中遇到一個分類展示的需求，看了別人的案例總是覺得有些看不懂，所以自己封裝了一個元件去使用。這個東西我們一般都是封裝起來去使用，所以本人也封裝了起來，供大家使用。

<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>

用例：

說明：