SortingButton 排序按钮

SortingButton 组件用于创建一个可点击的排序按钮，支持配置激活颜色、非激活颜色、前置图标、后置图标等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="排序按钮">
		<t-card class="mlrt.30" title="SortingButton" sub-title="升序降序按钮"></t-card>
		<t-section class="tdb-tdr-mtlr.30" :title="`排序：${sortType[sort]}`" type='p'></t-section>
		<introduction title="基础功能+主题展示">
			<t-row>
				<t-sorting-button class="mr.15" :state="sort" type="p" @change="sortChange"></t-sorting-button>
				<t-sorting-button class="mr.15" type="success" :state="sort"></t-sorting-button>
				<t-sorting-button class="mr.15" type="error" :state="sort"></t-sorting-button>
				<t-sorting-button class="mr.15" type="warning" :state="sort"></t-sorting-button>
			</t-row>
		</introduction>
		<introduction title="自定义样式" introduction>
			<t-row>
				<t-sorting-button prefixIcon="arrow-up-fill" class="mr.15" suffixIcon="arrow-down-fill" type="s"
					:state="sort"></t-sorting-button>
				<t-sorting-button prefixIcon="arrow-up-fill" class="mr.15-ats.0.6" suffixIcon="arrow-down-fill" type="error"
					:state="sort"></t-sorting-button>
			</t-row>
		</introduction>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				sortType: ['默认状态', '升序', '降序'],
				sort: 1,
			};
		},
		methods: {
			sortChange(_ : number) {

			}
		},
	}
</script>

<style lang="scss">

</style>

Props

名称	描述	类型	默认值	可选值
activeColor	激活颜色	String	''	-
inactiveColor	非激活颜色	String	'#cccccc'	-
prefixIcon	前置图标名称	String	'arrow-up-fill'	-
prefixIconClass	前置图标的类名	String	''	-
suffixIcon	后置图标名称	String	'arrow-down-fill'	-
suffixIconClass	后置图标的类名	String	''	-
state	排序状态	Number	0	-

Events

事件名	描述	回调参数
change	排序状态改变时触发	(sortState: number)