更新记录
0.0.7(2025-07-25) 下载此版本
- fix: 修复uniappx ios 首次无法监听尺寸变化
0.0.6(2025-07-25) 下载此版本
- fix: 修复uniappx ios 首次无法监听尺寸变化
0.0.5(2025-07-25) 下载此版本
- fix: 修复uniappx ios 设置sliderColor不生效的问题
平台兼容性
uni-app(4.54)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | 5.1 | √ | √ |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
uni-app x(4.75)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
√ | √ | 5.1 | √ | √ | √ |
lime-segmented 分段器组件
一个功能丰富的分段器组件,用于在不同视图间切换。支持多种样式、尺寸和自定义选项,可用于标签切换、分类筛选等多种场景。组件提供了丰富的自定义选项,可以满足各种复杂的界面设计需求。
插件依赖:
lime-shared
、lime-style
文档链接
📚 组件详细文档请访问以下站点:
安装方法
- 在uni-app插件市场中搜索并导入
lime-segmented
- 导入后可能需要重新编译项目
- 在页面中使用
l-segmented
组件
代码演示
基础用法
最简单的分段器组件用法,只需要设置选项数组即可。
<l-segmented v-model="value" :options="options" />
const value = ref(1);
const options = ['选项1','选项2','选项3','选项4'];
形状
通过shape
设置分段器形状,可选值round
。
<l-segmented shape="round" />
类型
通过type
设置分段器类型,可选值有button
、text
,默认值为card
。
<l-segmented v-model="value" type="button" />
<l-segmented v-model="value" type="text" />
尺寸
通过size
设置分段器尺寸,可选值有small
、large
,默认值为medium
。
<l-segmented v-model="value" size="small" />
<l-segmented v-model="value" size="large" />
自定义样式
通过color
设置文本颜色,active-color
设置当前状态文本颜色,bg-color
设置背景色,slider-color
设置滑块背景色。
<l-segmented
v-model="value"
type="button"
color="#34c471"
active-color="#fff"
bg-color="#f3fff8"
slider-color="#34c471"
:options="options"
/>
受控模式
通过设置value
属性和click
事件实现异步控制。
<l-segmented :value="value" :options="options" @click="handleClick" />
const value = ref(1);
const handleClick = (index: number) => {
uni.showLoading({ title: '校验中' });
setTimeout(() => {
uni.hideLoading();
value.value = index;
}, 1000);
};
快速预览
导入插件后,可以直接使用以下标签查看演示效果:
<!-- 代码位于 uni_modules/lime-segmented/components/lime-segmented -->
<lime-segmented />
插件标签说明
- 默认
l-segmented
为组件标签 - 默认
lime-segmented
为演示标签
Vue2使用说明
本插件使用了composition-api
,如需在Vue2项目中使用,请按照官方教程配置。
关键配置代码(在main.js中添加):
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
API文档
Props
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前选中分段的索引值 | number | - |
value | 当前选中分段的索引值 | number | - |
size | 分段器尺寸,可选值small 、medium 、large |
string | medium |
shape | 分段器形状,可选值normal 、round |
string | normal |
disabled | 是否禁用分段器 | boolean | false |
type | 分段器类型,可选值button 、card 、text |
string | card |
bgColor | 分段器背景色 | string | - |
color | 分段器文本颜色 | string | - |
activeColor | 当前选中分段的文本颜色 | string | - |
sliderColor | 分段器滑块背景色 | string | - |
fontSize | 分段器文字大小 | string | - |
height | 分段器高度 | string | - |
padding | 分段器内边距 | string | - |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 分段切换时触发 | index: 当前选中分段的索引 |
click | 点击分段时触发 | index: 点击分段的索引 |
主题定制
组件提供了以下CSS变量,可用于自定义样式:
变量名 | 默认值 | 说明 |
---|---|---|
--l-segmented-primary-color |
$primary-color |
主色(默认激活项边框/文字色) |
--l-segmented-bg-color |
$fill-3 |
背景色 |
--l-segmented-padding-x |
$spacer-tn |
水平内边距 |
--l-segmented-padding-y |
$spacer-tn |
垂直内边距 |
--l-segmented-radius |
$border-radius-sm |
整体圆角大小 |
--l-segmented-text-color |
$text-color-1 |
文字颜色 |
--l-segmented-active-bg-color |
white |
激活项背景色 |
--l-segmented-active-text-color |
$primary-color |
激活项文字颜色 |
--l-segmented-small-height |
32px |
小尺寸高度 |
--l-segmented-small-font-size |
$font-size-sm |
小尺寸文字大小 |
--l-segmented-medium-height |
36px |
中尺寸高度 |
--l-segmented-medium-font-size |
$font-size |
中尺寸文字大小 |
--l-segmented-large-height |
40px |
大尺寸高度 |
--l-segmented-large-font-size |
$font-size-md |
大尺寸文字大小 |
支持与赞赏
如果你觉得本插件解决了你的问题,可以考虑支持作者:
支付宝赞助 | 微信赞助 |
---|---|
![]() |
![]() |