k_online_ui/src/components/SeeAllIcon/src/SeeAllIcon.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const isCollapse = defineModel<boolean>()
const emits = defineEmits<{ collapse: [boolean] }>()
const handleSeeAll = () => {
  isCollapse.value = !isCollapse.value
  // 使用nextTick来确保父组件能够在子组件的值更新后获取到最新的值
  nextTick(() => {
    emits('collapse', isCollapse.value as boolean)
  })
}
</script>

<template>
  <div class="see-all-icon" @click="handleSeeAll">
    <span class="btn">{{ t('common.seeAll') }}</span>
    <span
      class="icon font_family icon-icon_dropdown__line_b"
      :class="{ 'is-rotate': isCollapse }"
    ></span>
  </div>
</template>

<style lang="scss" scoped>
.see-all-icon {
  display: inline-block;
  cursor: pointer;
  & > .btn {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-theme);
  }
  & > .icon {
    display: inline-block !important;
    margin-left: 2px;
    margin-top: -2px;
    transform: rotate(0deg);
    transition: all 0.3s;
    color: var(--color-theme);
    &.is-rotate {
      transform: rotate(180deg) !important;
    }
  }
}
</style>