VUE 查询高亮显示文本

最新推荐文章于 2024-08-03 20:57:01 发布

Teln_小凯

最新推荐文章于 2024-08-03 20:57:01 发布

阅读量386

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq873113580/article/details/128733499

版权

VUE 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

高亮效果

高亮代码

<template slot="title" slot-scope="title">
                <span v-if="$store.state.setting.lang == 'CN' && title.menu_name.indexOf(menuTreeSearchValue) > -1">
                  {{ title.menu_name.substr(0, title.menu_name.indexOf(menuTreeSearchValue)) }}
                  <span style="color: #f50">{{ menuTreeSearchValue }}</span>
                  {{ title.menu_name.substr(title.menu_name.indexOf(menuTreeSearchValue) + menuTreeSearchValue.length) }}
                </span>
                <span v-else-if="$store.state.setting.lang == 'US' && title.menu_name_en.indexOf(menuTreeSearchValue) > -1">
                  {{ title.menu_name_en.substr(0, title.menu_name_en.indexOf(menuTreeSearchValue)) }}
                  <span style="color: #f50">{{ menuTreeSearchValue }}</span>
                  {{ title.menu_name_en.substr(title.menu_name_en.indexOf(menuTreeSearchValue) + menuTreeSearchValue.length) }}
                </span>
                <span v-else>{{ $store.state.setting.lang == 'CN'?title.menu_name: title.menu_name_en}}</span>
              </template>