排序三角组件

效果

排序三角组件

<template>
  <div class="order">
    <div class="order-text" @click="textBtnFn">
      <slot></slot>
    </div>
    <div class="order-icon" @click="nabFn">
      <div :class="['nab', 'nablb',currentOrder === 1 ? 'active-nablb' : '']"></div>
      <div :class="['nab', 'nablt',currentOrder === 2 ? 'active-nablt' : '']"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    activeOrder: {
      type: [Number],
      default: 0,
    },
    uuid: {
      type: [String, Number],
      default: 0
    }
  },
  comments: {},
  computed: {},
  data() {
    return {
      currentOrder: 0
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 初始化排序
    initOrder () {
      this.currentOrder = 0
    },

    // 文字点击
    textBtnFn () {
      this.nabFn()
    },

    // 排序
    nabFn () {
      if (this.currentOrder === 1) {
        this.currentOrder = 2
      } else if (this.currentOrder === 2) {
        this.currentOrder = 1
      } else {
        this.currentOrder = 1
      }
      this.$emit('click', this.currentOrder,this.uuid)
    }
  },
  watch: {
    activeOrder: {
      handler(num) {
        this.currentOrder = num
      },
      deep: true,
      immediate: true
    }
  },
}
</script>

<style lang="less" scoped>
.order {
  font-size: 12px;

  display: grid;
  grid-template-columns: 1fr 15px;
  &-text {
    width: max-content;

    display: flex;
    align-items: center;

    &:hover {
      cursor: pointer;
      color: #2cc2a5;
    }
  }
  &-icon {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    justify-content: center;
    align-self: center;
    grid-gap: 2px;

    .nab {
      width: 0px;
      height: 0px;
      cursor: pointer;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
    }
    .nablb {
      border-bottom: 6px solid #8798ad;

      &:hover {
        border-bottom-color: #2cc2a5;
      }
    }
    .nablt {
      border-top: 6px solid #8798ad;
      &:hover {
        border-top-color: #2cc2a5;
      }
    }
    .active-nablb {
      border-bottom-color: #2cc2a5;
    }
    .active-nablt {
      border-top-color: #2cc2a5;
    }
  }
}
</style>

使用

uuid 是使用多个组件的唯一标识；
activeOrder 是三角显示高亮样式的开关；1为上三角，2为下三角，0为默认样式；

<div class="order-buttons flex">
  <order-button :uuid="0" :active-order="activeOrder[0]" @click="taskTotalFn">任务状态</order-button>
  <order-button :uuid="1" :active-order="activeOrder[1]" @click="taskTotalFn">已完成集数</order-button>
  <order-button :uuid="2" :active-order="activeOrder[2]" @click="taskTotalFn">总任务集数</order-button>
</div>

activeOrder: [0, 0, 1]

taskTotalFn(sortNum, uuid) {
  this.activeOrder.forEach((res, index) => {
    if (index !== uuid) {
      this.$set(this.activeOrder, index, 0)
    } else {
      this.$set(this.activeOrder, index, sortNum)
    }
  })
  console.log(this.activeOrder, 'this.activeOrder')
},