dz-app/components/mx-subsection/mx-subsection.vue

<template>
    <uv-subsection v-bind="{...props, ...override}" :style="{width: width}">
        <template v-for="name in Object.keys($slots)" #[name]="scope">
            <slot :name="name" v-bind="scope"/>
        </template>
    </uv-subsection>
</template>

<script setup>
import {useAttrs, ref, watch, computed} from 'vue';
import {createPropDefine} from "@/utils";
import {func} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {subsectionProps} from "@/uni_modules/uv-subsection/components/uv-subsection/uv-subsection.vue";

// 如果不禁止，uv-subsection会自动处理外部onChange，即可能造成两次调用
defineOptions({inheritAttrs: false})

// 将current响应改为modelValue
const copyProps = {...subsectionProps}
delete copyProps.current
const props = defineProps({
    ...subsectionProps,
    modelValue: createPropDefine(0, Number),
    customStyle: createPropDefine('height:36px;border-radius:18px'),
    customItemStyle: createPropDefine('border-radius:15px'),
    width: createPropDefine('')
})
const emits = defineEmits(['update:modelValue'])
const attrs = useAttrs()

const override = computed(() => ({
    current: props.modelValue, // 内部消化了current
    onChange: (index) => {
        emits('update:modelValue', index)
        // 如果外部绑定了@change，原样调用，不去影响它
        if (func(attrs.onChange) && index != props.modelValue) attrs.onChange(index)
    }
}))

</script>

<style scoped>

</style>