仿(京东、淘宝)顶部分类展示列表

仿(京东、淘宝)顶部分类展示列表

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

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

<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-[]
sendSearchConditionEvent事件event--

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值