LimeUI+1.2.0

主题

LimeSorter 排序组件 ​

一个功能强大的排序组件，支持多种排序方式和自定义样式。可用于列表数据的排序操作，如价格排序、销量排序等场景。组件提供了丰富的自定义选项，可以满足各种复杂的排序需求。

插件依赖：lime-shared、lime-style

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-sorter
  2. 导入后可能需要重新编译项目
  3. 在页面中使用l-sorter组件

代码演示 ​

基础操作 ​

通过默认插槽或label设置按钮文本

html
<l-sorter label="价格"></l-sorter>

允许重置 ​

双箭头状态下(默认状态)通过设置 allow-reset 允许重置按钮为未选中状态

html
<l-sorter allow-reset>价格</l-sorter>

降序优先 ​

通过设置 desc-first 优先切换为降序，默认为升序。

html
<l-sorter desc-first>价格</l-sorter>

自定义样式 ​

通过插槽实现更个性的样式，可通过arrow插槽传递出来的value值判断需要显示的内容，0：默认，1：升序，-1：降序

html
<l-sorter>
	<text>价格</text>
	<template #arrow="{value}">
		<view style="margin-left: 4px; flex-direction: row;">
			<text v-show="value == 1 || value == 0" style="font-size: 10px; font-weight: bold;">↿</text>
			<text v-show="value == -1 || value == 0" style="font-size: 10px; font-weight: bold">⇂</text>
		</view>
	</template>
</l-sorter>

Vue2使用说明 ​

main.js中添加以下代码：

js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

插件标签说明 ​

l-sorter 为组件标签
lime-sorter 为演示标签

API文档 ​

Props 属性说明 ​

参数说明类型默认值
value选中的箭头方向：1 升序，0 重置状态，-1 降序。number
v-model选中的箭头方向：1 升序，0 重置状态，-1 降序。number
defaultValue选中的箭头方向：1 升序，0 重置状态，-1 降序。number0
label排序按钮展示的文案。string
labelStylelabel样式。string
allowReset当展示双箭头时，是否允许手动重置按钮booleanfalse
descFirst是否优先切换为降序，如果不开启则默认优先切换为升序。booleanfalse
activeColor箭头激活色。string
inactiveColor箭头非激活色。string
arrowSize箭头尺寸。string

Events 事件 ​

事件名说明回调参数
change排序值变化时触发(value: number)

Slots 插槽 ​

名称说明
default排序项内容
arrow箭头插槽：(value: number)

主题定制 ​

组件提供了以下CSS变量，可用于自定义主题：

变量名称默认值描述
--l-sorter-font-size15px排序标签字体大小
--l-sorter-color$text-color-1排序标签文本颜色
--l-sorter-arrow-size6px排序箭头大小
--l-sorter-arrow-color$gray-5默认箭头颜色(uniappx app无效)
--l-sorter-arrow-active-color$primary-color激活状态箭头颜色(uniappx app无效)

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助
支付宝赞赏码微信赞赏码

源代码 ​

组件源码