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值构建你想要的参数。本示例仅简单演示思路。
。