更新记录

1.0.0（2026-01-05） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-searchuni_modules版本的即可，无需import

组件关联说明

• xf-scss辅助样式;
• xf-icon;
• xf-uview-plus;

代码演示

基本用法

• 使用组件代码如下：

<template>
    <view class="xf-col main-page" style="gap: 10px;">
        <text>搜索 S1 ：简单搜索</text>
        <xf-search v-model="searchText" placeholder="搜索客户、业务" @search="onSearch"></xf-search>
        <xf-search v-model="searchText" placeholder="搜索客户、业务" hasSearchBtn @search="onSearch"></xf-search>

        <text>带筛选搜索</text>
        <xf-search v-model="searchText" placeholder="搜索客户、业务" isFilter @search="onSearch" @handleFilter="handleFilter">
        </xf-search>

        <text>筛选后状态</text>
        <xf-search v-model="searchText" placeholder="搜索客户、业务" isFilter isFiltered @search="onSearch"
            @handleFilter="handleFilter">
        </xf-search>

        <xf-search v-model="searchText" hasSearchBtn placeholder="搜索客户、业务" isFilter isFiltered @search="onSearch"
            @handleFilter="handleFilter">
        </xf-search>

    </view>
</template>

<script setup lang="ts">
    // 搜索页面
    import { computed, ref } from 'vue'
    const searchText = ref('')

    const onSearch = (e) => {
        console.log(e)
    }

    const handleFilter = (e) => {
        console.log(e)
    }

</script>

API

Props

事件 Emits