前端自定义模糊搜索组件（vue+scss）

不多逼逼，直接上代码。

index.vue

<template>
    <view id="fuzzySearch">
        <view class="inputBox">
            <img class="queryImg" src="../static/query.png" alt="">
            <input class="input" type="text" v-model="inputVal" @input="search" placeholder="搜索图片、文章、视频" />
        </view>
        <transition name="slide-fade">
            <scroll-view scroll-y="true" class="searchResultBox" v-if="searchResult.length">
                <view class="searchResult" v-for="(item, index) in searchResult" :key="index">
                    <text v-for="(itemSon, indexSon) in item.splitArr" :key="indexSon"
                        :class="itemSon == inputVal ? 'blue' : ''">
                        {{ itemSon }}
                    </text>
                </view>
            </scroll-view>
        </transition>
        
    </view>
</template>

<script>
export default {
    props: {
        searchArr: Array,
    },
    data() {
        return {
            searchResult: [],
            inputVal: "",
            // searchArr: [
			// 	{
			// 		str: "你好啊你好啊你好啊你好啊你",
			// 		id: 1,
			// 	},
			// 	{
			// 		str: "他好啊他好啊他好啊他好啊他好啊",
			// 		id: 2,
			// 	},
			// ],// 模拟数据  数据必须含有 str
        };
    },
    created() { },
    mounted() { },
    methods: {
        // 搜索事件
        search() {
            this.searchResult = [];
            if (this.inputVal) {
                let arr = this.searchArr.filter((item) => {
                    return item.str.indexOf(this.inputVal) != -1;
                });
                arr.forEach((item) => {
                    let obj = {};
                    obj = JSON.parse(JSON.stringify(item));
                    obj.splitArr = item.str.split(this.inputVal);
                    this.searchResult.push(obj);
                });
                this.splitJoint();
            }
        },
        // 将切片后的字符串进行拼接
        splitJoint() {
            this.searchResult.forEach((item) => {
                let arr = [];
                if (item.splitArr.indexOf("") == -1) {
                    item.splitArr.forEach((itemSon, indexSon) => {
                        if (indexSon == item.splitArr.length - 1) {
                            arr.push(itemSon);
                        } else {
                            arr.push(itemSon);
                            arr.push(this.inputVal);
                        }
                    });
                } else {
                    if (item.splitArr.indexOf("")) {
                        item.splitArr.forEach((itemSon, indexSon) => {
                            if (itemSon != "" && indexSon != item.splitArr.length - 1) {
                                arr.push(itemSon);
                                arr.push(this.inputVal);
                            } else if (indexSon != item.splitArr.length - 1) {
                                arr.push(this.inputVal);
                            } else {
                                arr.push(itemSon);
                            }
                        });
                    } else {
                        item.splitArr.forEach((itemSon, index) => {
                            if (itemSon != "") {
                                arr.push(this.inputVal);
                                arr.push(itemSon);
                            } else {
                                if (index == item.splitArr.length - 1) {
                                    arr.push(this.inputVal);
                                }
                            }
                        });
                    }
                }
                item.splitArr = arr;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

index.scss

```javascript

```javascript

```css
#fuzzySearch {
    width: 100%;
    background: white;
    margin-bottom: 8px;

    .inputBox {
        position: relative;
        width: 100%;
        height: 3rem;
        padding-top: .5rem;
        padding-left: 1rem;
        padding-right: 1rem;

        // background: rgb(238, 237, 237);
        .queryImg {
            position: absolute;
            top: 1rem;
            left: 1.5rem;
            width: 1rem;
            height: 1rem;
        }

        .input {
            width: 100%;
            height: 2rem;
            font-size: 14px;
            line-height: 1.5rem;
            border-radius: 1.5rem;
            padding-left: 2rem;
            background: #f5f5f5;
        }
    }

    .searchResultBox {
        position: absolute;
        z-index: 999;
        width: 100%;
        height: 12rem;
        overflow: hidden;
        border-radius: 10px;
        margin-top: 5px;
        background: white;

        .searchResult {
            width: 80%;
            margin-left: 10%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;

            .blue {
                color: blue;
            }
        }
    }
}

.slide-fade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active {
    transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active 用于 2.1.8 以下版本 */
    {
    transform: translateY(-10px);
    opacity: 0;
}

自己封装的，有需求自取，有问题可以说出来，加以改进。