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


## 文档
  [segmented【站点1】](https://limex.qcoon.cn/components/segmented.html)
  [segmented【站点2】](https://limeui.netlify.app/components/segmented.html)
  [segmented【站点3】](https://limeui.familyzone.top/components/segmented.html)


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

## 代码演示
### 基础使用
通过`v-model`设置当前选中的分段索引值，通过`options`设置选项数组

```html
<l-segmented v-model="value" :options="options" />
```
```js
const value = ref(1);
const options = ['选项1','选项2','选项3','选项4'];
```

### 形状
通过`shape`设置分段器形状，可选值`round`

```html
<l-segmented shape="round" />
```

### 类型
通过`type`设置分段器类型，可选值有`button`,`text`,默认值为`card`

```html
<l-segmented v-model="value" type="button" />
<l-segmented v-model="value" type="text" />
```

### 尺寸
通过`size`设置分段器尺寸，可选值有`small`,`large`,默认值为`medium`

```html
<l-segmented v-model="value" size="small" />
<l-segmented v-model="value" size="large" />
```

### 自定义样式
通过`color`设置文本颜色，`active-color`设置当前状态文本颜色，`bg-color`设置背景色，`slider-color`设置滑块背景色。

```html
<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`事件达到异步控制。
```html
<l-segmented :value="value" :options="options" @click="click" />
```
```js
const value = ref(1);
const click = (index: number) => {
	uni.showLoading({
		title: '校验中'
	})
	
	setTimeout(()=>{
		uni.hideLoading()
		value.value = index
	},1000)
}
```


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

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

### 插件标签
- 默认 l-segmented 为 component
- 默认 lime-segmented 为 demo

### Vue2使用��vue2部分加上这一段即可.

```js
// 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_ | - |

## 打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。  
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)