3.0作者好像要加這個，現在是沒有的。至於網上通過類名那些方法完全完全沒必要，簡單封裝一下即可。

效果

元件程式碼

<template>
  <span class="sort" @click="toggleSort" :class="`active-${state?'asc':'desc'}`">
    <slot/>
    <span class="caret-wrapper">
    <i class="sort-caret ascending"
 
></i>
    <i class="sort-caret descending"></i>
  </span>
  </span>
</template>

<script>
export default {
  name: "SortSlot",
  data(){
    return{
      // 排序狀態
      state:true,
    }
  },
  methods:{
    /**
     * @deprecated 切換排序
     * @method toggleSort
     */
 

    toggleSort(){
      // TODD 未新增防抖
      this.state = !this.state;
      this.$emit('change',this.state)
    }
  }
}
</script>

<style lang="scss" scoped>
  .sort{
    &:hover{
      cursor: pointer;
    }
  }
  .active-asc{
    .caret-wrapper{
      .sort-caret{
        &
 
:first-child{
          border-bottom-color: #409eff;
        }
      }
    }
  }
  .active-desc{
    .caret-wrapper{
      .sort-caret{
        &:last-child{
          border-top-color: #409eff;
        }
      }
    }
  }
</style>

使用

  <SortSlot>清運時間</SortSlot>

接收用change，根據bool值構建你想要的引數。本示例僅簡單演示思路。
。