<template>
|
<div class="tag">
|
<div
|
v-for="item in TagList"
|
:key="item.id"
|
:class="{'tag_item': true, 'tagActive': item.id === activeId}"
|
@click="change(item.id)">
|
<span>{{item.name}}</span>
|
<span v-if="isShow && item.num">({{item.num}})</span>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineProps, defineEmits, ref, watch } from 'vue'
|
|
const props = defineProps({
|
TagList: {
|
type: Array,
|
required: true
|
},
|
isShow: {
|
type: Boolean,
|
required: false,
|
default: false
|
}
|
})
|
|
const activeId = ref<string | number>('')
|
|
const emit = defineEmits(['change'])
|
|
const change = (id: string) => {
|
if (activeId.value !== id) {
|
activeId.value = id
|
emit('change', id)
|
}
|
}
|
|
watch(() => props.TagList, (data) => {
|
let list: any[] = data
|
if (list && list.length !== 0) {
|
activeId.value = list[0].id
|
}
|
}, { immediate: true })
|
</script>
|
|
<style lang="scss" scoped>
|
.tag::-webkit-scrollbar {
|
width: 0 !important;
|
}
|
.tag::-webkit-scrollbar {
|
width: 0 !important;
|
height: 0;
|
}
|
.tag {
|
overflow-x: scroll;
|
display: flex;
|
align-items: center;
|
flex-wrap: nowrap;
|
padding: 5px 0;
|
.tagActive {
|
background: $nav-color !important;
|
span {
|
color: #FFFFFF !important;
|
}
|
}
|
.tag_item {
|
padding: 14px 24px;
|
border-radius: 26px;
|
flex-shrink: 0;
|
margin-right: 20px;
|
border: 1PX solid #CCCCCC;
|
span {
|
font-size: 26px;
|
font-weight: 400;
|
color: #555555;
|
}
|
}
|
}
|
</style>
|
