排序三角组件
效果
排序三角组件
<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')
},