更新记录

0.0.2（2024-10-15） 下载此版本

• chore: 兼容vue2

0.0.1（2024-10-14） 下载此版本

• init

平台兼容性

lime-segmented 分段器

• 分段器由至少 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

Events

主题定制

样式变量

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

打赏

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