t-sorting-button

SortingButton 排序按钮

组件介绍

t-sorting-button 是排序按钮组件，用于升序降序切换，常用于表格排序场景。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/sortingbutton/sortingbutton.uvue，通过 state 属性控制排序状态。

<template>
  <t-sorting-button 
    :state="sortState"
    @change="onSortChange">
  </t-sorting-button>
</template>

<script setup>
const sortState = ref(0)

function onSortChange(state: number) {
  sortState.value = state
  console.log('排序状态：', state)
}
</script>

Props

属性名	说明	类型	默认值
state	排序状态，0 默认、1 升序、2 降序	number	1
activeColor	已选择的颜色	string	-
inactiveColor	未选择的颜色	string	'#cccccc'
prefixIcon	前置图标名称（升序图标）	string	'arrow-up-fill'
prefixIconClass	前置图标样式	string	-
suffixIcon	后置图标名称（降序图标）	string	'arrow-down-fill'
suffixIconClass	后置图标样式	string	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	''
size	组件尺寸	string	''

state 状态值

值	说明
0	默认状态
1	升序
2	降序

Events

事件名	说明	回调参数
change	状态变化时触发	state: number