vue项目封装排序组件

<template>
  <div class="main">
    <span class="arrUp" @click.stop="clickUp" :class="{'active':sortOrderParams===1}"></span>
    <span class="arrDown" @click.stop="clickDown" :class="{'active':sortOrderParams===2}"></span>
  </div>
</template>

<script>
import debounce from 'lodash.debounce';
export default {
  name: "SmallTriangle",
  data() {
    return {
      sortOrderParams:this.sortOrder,
    }
  },
  props: {
    sortOrder: {
      type: Number,
    },
  },
  watch:{
    sortOrder:{
      handler(newVal,oldVal){
        this.sortOrderParams = newVal
      },
      deep:true,
      immediate:true,
    }

  },

  methods: {
    clickUp:debounce(function() {
      this.sortOrderParams = this.sortOrderParams === 1 ? 0 : 1;
      this.$emit('clickTriangle', this.sortOrderParams);
    },500,{leading:true,trailing:false}),
    
    clickDown:debounce(function() {
      this.sortOrderParams = this.sortOrderParams === 2 ? 0 : 2;
      this.$emit('clickTriangle', this.sortOrderParams);
    },500,{leading:true,trailing:false}),
  }
}
</script>

<style scoped>

.main {
  display: inline-flex;
  flex-direction: column;
  margin-left: 5px;
}

.arrUp {
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #a5a5a5;
  cursor: pointer;
}

.arrDown {
  width: 0;
  height: 0;
  margin-top: 3px;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #a5a5a5;
  cursor: pointer;
}
.active{
  border-bottom-color: #1592e6;
  border-top-color: #1592e6;
}

</style>

父组件引用

         <span class="name fx" @click="changeSortMain('name')">文件名
            <SortTool :sortOrder="sortData.name" @clickTriangle="(param) => {changeSort(param, 'name')}"/>
          </span>
          <span class="source fx" @click="changeSortMain('org_name')">来源
            <SortTool :sortOrder="sortData.org_name" @clickTriangle="(param) => {changeSort(param, 'org_name')}"/>   
          </span>

    //点击上下箭头选择升降序
    changeSort(val,type){
      // console.log(val,type)
      const defaultData = {
        name:0,
        org_name:0,
        size:0,
        update_time:0,        
      }
      this.sortData = defaultData
      this.sortData[`${type}`] = val
      // console.log(this.sortData,'==================排序====================')

    },
    // 点击文字改变排序
    changeSortMain:debounce(function(type){
      const typeArr = ['name','org_name','size','update_time'];
      typeArr.forEach(item=>{ 
         if(item!==type){
            this.sortData[`${item}`]=0
         }
      })
           
       if(this.sortData[`${type}`]===2) {      
        this.sortData[`${type}`] = 0
       }else{
        this.sortData[`${type}`]+=1
       }
      //  this.sortType = type
      //  this.orderType = this.sortData[`${type}`]===0 ?'0':this.sortData[`${type}`]===1? 'asc' : 'desc'
      //  this.getResourceList(true);

      //  console.log(this.sortData,'==================排序====================')
    },500,{leading:true,trailing:false})