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

<template>
    <uv-search v-bind="{...props, ...attrs}">
        <template v-for="name in Object.keys($slots)" #[name]>
            <slot :name="name"/>
        </template>
        <template v-if="!$slots.suffix" #suffix>
            <uv-button type="primary" shape="circle" size="mini" :text="actionText" @click="handleSearch"/>
        </template>
    </uv-search>
</template>

<script setup>
import {useAttrs} from 'vue';
import {createPropDefine} from "@/utils";
import {func} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {searchProps} from "@/uni_modules/uv-search/components/uv-search/uv-search.vue";

// 事件会自然穿透，因为默认inheritAttrs=true
// 因为外部事件会被分别为attrs，但如果这里也申明事件，则attrs中就会接收不到
const props = defineProps({
    ...searchProps,
    showAction: createPropDefine(false, Boolean)
})
const attrs = useAttrs()

const handleSearch = () => {
    // 因为这里用了事件穿透的方式，这里就不要emit外抛了，直接调用attrs中的方法就可以了
    if (func(attrs.onSearch)) attrs.onSearch()
}
</script>

<style scoped lang="scss">
::v-deep(.uv-search) {
    .uv-search__content {
        padding-right: 3px;

        .uv-button--mini {
            height: 28px;
        }

        .uv-button__text {
            font-size: 12px !important;
        }
    }
}
</style>