更新记录

0.0.1（2025-01-23） 下载此版本

• init

平台兼容性

lime-sorter 排序按钮

• 用于显示一个可以点击的按钮, 用于排序数据
• 插件依赖lime-shared,lime-style不喜勿下

安装

在插件市场导入即可，首次导入可能需要重新编译

代码演示

基础操作

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

<l-sorter>价格</l-sorter>

允许重置

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

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

降序优先

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

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

自定义样式

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

<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>

插件标签

• 默认 l-sorter 为 component
• 默认 lime-sorter 为 demo

• 关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

Slots

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。