vuejs搜索关键字高亮显示并且实现切换显示下一个选项多种方法

浅浅的花香味﹌ 2022-12-29 09:22 165阅读 0赞

参考资料：

[https://segmentfault.com/q/1010000038543596?\_ea=87295903][https_segmentfault.com_q_1010000038543596_ea_87295903]

第一种方法：

手写：

<template>
        <div>
            <el-button
                v-for="item in list"
                :key="item.id"
                @click="clickBtn(item.value)">{
       { item.value }}</el-button>
            <div v-html="voiceContent"></div>
        </div>
    </template>
    <script>
    export default {
        data() {
            return {
                list: [{id: 1, value: '你们'}, {id: 2, value: '什么'}, {id: 3, value: '来'}],
                select: '',
                text: '出来没有？你们什么时候来的？',
                selectIndex: 1
            };
        },
        computed: {
            voiceContent() {
                const regText = this.list.map(item => item = item.value).join('|');
                let index = 0;
                return this.text.replace(new RegExp(regText, 'g'), (a, b, c) => {
                    if (this.select == a) index++;
                    return `<span class="${this.select == a && this.selectIndex == index ? 'red' : 'yellow'}">${a}</span>`;
                });
            }
        },
        methods: {
            clickBtn(value) {
                const num = this.text.match(new RegExp(value, 'g')).length;
                if (this.select == value && num > this.selectIndex) {
                    this.selectIndex++;
                } else {
                    this.select = value;
                    this.selectIndex = 1;
                }
            }
        }
    };
    </script>
    <style>
        .yellow{
            color: yellow;
        }
        .red{
            color: red;
        }
    </style>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

第二种方法：

少侠，看看这个：[https://github.com/Lushenggan...][https_github.com_Lushenggan...]

在线体验：  
[https://wintc.top/laboratory/\#/search-highlight][https_wintc.top_laboratory_search-highlight]

有用帮忙点个星星~

[https_segmentfault.com_q_1010000038543596_ea_87295903]: https://segmentfault.com/q/1010000038543596?_ea=87295903
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221120/7d780c9423904c00a1b8522f0e54ee2b.png
[https_github.com_Lushenggan...]: https://github.com/Lushenggang/vue-search-highlight
[https_wintc.top_laboratory_search-highlight]: https://wintc.top/laboratory/#/search-highlight