Subsection 分段器

该分段器一般用于用户从几个选项中选择某一个的场景

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 通过 list 数组参数传递分段的选项，数组元素可为字符串，或者通过 keyName 参数传入对象(默认为name)
• 通过current指定初始化时激活的选项

<template>
    <fu-subsection :list="list" :current="current"></fu-subsection>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const list = reactive([
        { name: '待付款' },
        { name: '待发货' },
        { name: '待收货' },
    ]);

    // 或者如下，也可以配置keyName属性修改对象键名
    // const list = reactive(['待付款', '待发货', '待收货'])

    let current = ref(1); // 当前激活的选项
</script>

设置模式选择

通过 mode 属性设置分段器的模式，可选值为 button 和 subsection

• 配置 button 时为按钮模式
• 配置 subsection 时为分段器模式

<fu-subsection :list="list" :current="1"></fu-subsection>

设置颜色

• 通过 activeColor 配置激活选项的文字颜色，mode为subsection时无效，此时默认为白色
• 通过 inactiveColor 配置未激活选项的文字颜色
• 通过 bgColor 配置背景颜色，mode为button时有效

<fu-subsection :list="list" activeColor="#2979ff"></fu-subsection>

注意事项

如果需要通过一个变量绑定 current 属性，需要在 change 事件回调中修改此属性，否则可能会由于 props 的限制，前后两次设置 current 为相同的值，而导致无法通过修改 current 属性触发分段器的变化。

<template>
    <fu-subsection :list="list" :current="current" @change="handleChange"></fu-subsection>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const list = reactive([
        { name: '待付款' },
        { name: '待发货' },
        { name: '待收货' },
    ]);

    // 或者如下，也可以配置keyName属性修改对象键名
    // const list = reactive(['待付款', '待发货', '待收货'])

    let current = ref(1); // 当前激活的选项

    // methods方法
    const handleChange = (index) => {
        current.value = index; // 修改current属性
    }
</script>

API

Subsection Props

属性名	说明	类型	默认值	可选值
duration	动画时长，单位为ms	String｜Number	300	-
list	选项的数组，详见上方基础用法	Array	-	-
current	当前激活的选项索引	Number	0	-
activeColor	激活时的颜色	String｜Number	#2979ff	-
inactiveColor	未激活时的颜色	String｜Number	#303133	-
mode	模式选择，详见上方设置模式选择	String	button	subsection
size	字体大小，单位px	String｜Number	12	-
bold	是否加粗	Boolean	true	false
bgColor	背景颜色，详见上方设置颜色	String｜Number	#efeff0	-
keyName	从 list 元素对象中读取的键名	String	name	-
customStyle	定义需要用到的外部样式	String｜Object	-	-
customItemStyle	自定义选项样式	String｜Object	-	-

Subsection Events

事件名	说明	回调参数
change	分段器选项发生改变时触发	() => void