vue3 搜索高亮 列表文字高亮

<template>

<div>

<input v-model="text" type="text" placeholder="输入搜索内容" @keyup.enter="searchHandle">

<ul>

        <li  v-for="(item,index) in data.list" :key="index">

                <p v-html="item.title"></p>

        </li>

</ul>

</div>

</template>

<script>

import { ref,reactive } from 'vue'

export default {

        name:'demo',

        setup() {

                const text = ref('')

                const data = reactive({

                        list:[],

                })

                const searchHandle = () => {

                        if(text.value == ""){

                                Toast('请输入搜索内容')

                        }else{

                                //获取接口数据

                                getdata({

                                      text:text.value,  

                                }).then(res => {

                                         res.data.forEach(item => {

                                                if(text.value){

                                                //匹配关键字正则

                                                let replaceReg = new RegExp(text.value,'g');

                                                // 高亮替换v-html值

                                                let replaceString = '<span style="color:#EE855F">' + text.value + '</span>';

                                                item.title = item.title.replace(replaceReg, replaceString);

                                                }

                                                    data.list.push(item);

                                                })

                                })

                        }

                }

                return{

                        text,

                        data，

                        searchHandle,

                }

        }

}

</script>