vue搜索关键字高亮

最新推荐文章于 2024-07-16 12:08:26 发布

依窗看落花；

最新推荐文章于 2024-07-16 12:08:26 发布

阅读量138

点赞数

文章标签： vue.js elementui javascript vue

本文链接：https://blog.csdn.net/weixin_60487574/article/details/132566745

版权

<template>
  <div style="width: 800px;margin: 0 auto;">
    <br>
    <br>
    <br>
    <!-- 输入框 -->
    <el-input v-model="input" placeholder="请输入内容" @keyup.enter.native="search" @input="removeVal" :suffix-icon="input == '' ? 'el-icon-search' : ''" clearable></el-input>
    <!-- 表 -->
    <div v-loading="loading" style="width: 800px;height: 300px;">
        <div v-for="(item,index) in list" :key="index">
            <h1 style="text-align: left;" v-html="handleSearch(item.title)"></h1>
            <div style="text-align: left;">
                <span v-html="handleSearch('描述:')"></span>
                <span v-html="handleSearch(item.desc)" style="margin-right: 80px;"></span>
                <span v-html="handleSearch('角色:')"></span>
                <span v-html="handleSearch(item.role)"></span>
            </div>
            <hr style="margin-top: 8px;">
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        input:'',
        list:[],
        loading:false,
    }
  },
  mounted(){

  },
  computed:{

  },
  methods:{
    // 输入事件
    removeVal(val){
        if(val == ''){
            this.list = []
        }
    },
    // 回车
    search(){
        this.loading = true
        this.list = []
        var arr = [
        {
                title:'你好',
                desc:'青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪',
                role:'admin'
            },
            {
                title:'测试',
                desc:'少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉',
                role:'test'
            },
        ]
        setTimeout(()=>{
            this.list = arr
            this.loading = false
        },800)
    },
    // 关键字高亮
    handleSearch(val){
        const regExp = new RegExp(this.input, 'ig')
        return val.replace(regExp, `<span style="color: red;">${this.input}</span>`)
    }
  },
}
</script>
<style scoped>

</style>