# t-sorting-button

SortingButton 排序按钮

t-sorting-button 组件介绍

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

t-sorting-button 平台兼容

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

t-sorting-button 基础用法

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

<template>
	<view class="p-10">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="SortingButton"
				sub-title="升序降序按钮"></t-card>
		<t-section class="r-10"
				   title="基础功能+主题展示"
				   type='primary'></t-section>
		<t-row class="mb-15 r-10 mt-15 p-10">
			<t-sorting-button class="mr-7"
							  :state="sort"
							  type="primary"
							  @change="sortChange"></t-sorting-button>
			<t-sorting-button class="mr-7"
							  type="success"
							  :state="sort"></t-sorting-button>
			<t-sorting-button class="mr-7"
							  type="error"
							  :state="sort"></t-sorting-button>
			<t-sorting-button class="mr-7"
							  type="warning"
							  :state="sort"></t-sorting-button>
		</t-row>
		<t-section class="r-10"
				   title="自定义样式"
				   type='primary'></t-section>
		<t-row class="mb-15 r-10 mt-15 p-10">
			<t-sorting-button prefixIcon="arrow-up-fill"
							  class="mr-7"
							  suffixIcon="arrow-down-fill"
							  type="success"
							  :state="sort"></t-sorting-button>
			<t-sorting-button prefixIcon="arrow-up-fill"
							  class="mr-7"
							  suffixIcon="arrow-down-fill"
							  type="error"
							  :state="sort"></t-sorting-button>
		</t-row>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const sortType = ['默认状态', '升序', '降序']
	const sort = ref(1)
	const sortChange = (e : number) => {
		console.log(e)
	}
</script>

t-sorting-button 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	降序

t-sorting-button Events

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