LimeSegmented 分段器

• 分段器由至少 2 个分段控件组成，用作不同视图的显示，兼容uniapp/uniappx
• 插件依赖 lime-style、lime-shared,不喜勿下

安装

导入即可，首次导入可能需要重新编译

代码演示

基础使用

通过v-model设置当前选中的分段索引值，通过options设置选项数组

<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" />
<l-segmented v-model="value" shape="round" color="#fff" bg-color="#ffb400" active-color="#653a00" :options="options" />
<l-segmented v-model="value" type="text" color="#000" slider-color="#FF4D4F"  active-color="#FF4D4F" :options="options" />

受控

通过设置value属性和click事件达到异步控制。

<l-segmented :value="value" :options="options" @click="click" />

const value = ref(1);
const click = (index: number) => {
	uni.showLoading({
		title: '校验中'
	})
	
	setTimeout(()=>{
		uni.hideLoading()
		value.value = index
	},1000)
}

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-segmented/compoents/lime-segmented 
<lime-segmented />

插件标签

• 默认 l-segmented 为 component
• 默认 lime-segmented 为 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

参数	说明	类型	默认值
v-modle	当前分段 value	number	-
value	当前分段 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	点击时触发	event: number
click	点击时触发	event: number

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

名称	默认值	描述
--l-segmented-primary-color:	$primary-color	-
--l-segmented-bg-color:	$fill-3	-
--l-segmented-padding:	4px	-
--l-segmented-radius:	5px	-
--l-segmented-text-color:	$text-color-1	-
--l-segmented-active-bg-color:	white	-
--l-segmented-active-text-color:	$segmented-primary-color	-
--l-segmented-small-height:	32	-
--l-segmented-small-font-size:	12	-
--l-segmented-medium-height:	36	-
--l-segmented-medium-font-size:	14	-
--l-segmented-large-height:	40	-
--l-segmented-large-font-size:	16	-

打赏

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

源代码

组件源码