更新记录

1.0.0（2024-10-22） 下载此版本

第一个版本

平台兼容性

piao-search

属性

• origin :需进行搜索的数组，如下： const origin=ref([ { name:'张三', address:'贵州省贵阳市', age:10 } ])
• searchItem:需要进行字符匹配的字段，如下：

['name','address']，搜索时将对这两个字段的字符同时进行匹配；

方法

• search:输入字符时触发，返回新的数组供页面组件进行渲染显示。

特点：将字符匹配进行封装，可实现多个关键词的模糊搜索——多个关键词需要用空格分隔。

示例：

<template>
    <view>
        <piao-search
            :origin="searchData"
            :searchItem="searchItem"
            @search="search"
        ></piao-search>

        <uni-list v-for="(item, index) in fileList" :key="index">
            <uni-list-item
                :title="item.name"
                :thumb="item.img"
                clickable
                @click="onclick(item)"
                @longpress="onLongPress(item)"
            ></uni-list-item>
        </uni-list>
    </view>
</template>

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

const searchItem = ref(['name','address']);// 需要进行匹配的字段
const searchData = ref([]); // 独立提供给搜索框的待匹配的数组。注意：必须为独立使用的变量，其他程序不可调用，避免被污染
const fileList = ref([]);// 供页面列表组件渲染的数组，在初始化页面时，与searchData的值相同，在开始搜索后，其值发生改变

......

// 页面获取数据
function fetchData(){
    ......
    let finally = sortByKey(arr1, 'suffix'); // 获取数据
    searchData.value = finally; // 初始化赋值，之后只有在重新获取数据时才会发生改变
    fileList.value = finally; // 初始化赋值，在搜索开始后，其值发生改变
}

// 输入关键词进行搜索
function search(e) {
    fileList.value = e; // 将返回的值赋值给列表组件的数组
}

</script>