首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

vue 关键字高亮

Sonder
2024-09-11
2472字
6分钟
浏览 (748)

复制代码
computed: {
        // const selectOptions = [
        //     {
        //         key: 12111,
        //         value: '小国标大师命',
        //         name: '小国标大师命'
        //     },
        //     {
        //         key: 12121,
        //         value: '大国标小师命',
        //         name: '大国标小师命'
        //     },
        //     {
        //         key: 12121,
        //         value: '大国标大师命',
        //         name: '大国标大师命'
        //     },
        //     {
        //         key: 1321,
        //         value: '小国标赵怀真',
        //         name: '小国标赵怀真'
        //     }
        // ]
        searchOptions() {
            if (!this.searchKeywrod) return []
            const result = []

            this.selectOptions.forEach(opt => {
                    if (opt.value === this.searchKeywrod) {
                        // sort = 0
                        result.push({ ...opt, sort: 0, nameArr: [opt.value], _item: { mappingField: item.mappingField, type: item.type, name: item.name } })
                    } else {
                        const keywordStartIndex = opt.name.indexOf(this.searchKeywrod) + 1
                        if (keywordStartIndex) {
                            // sort = 全包含开始位置 + 1
                            const nameArr = opt.name.split(this.searchKeywrod)
                            nameArr.splice(1, 0, this.searchKeywrod)
                            result.push({ ...opt, sort: keywordStartIndex, nameArr, _item: { mappingField: item.mappingField, type: item.type, name: item.name } })
                        }
                    }
                })
            return result.sort((a, b) => a.sort - b.sort)
        }
    },
复制代码
<el-input clearable class="filter-serch-input" v-model.trim="searchKeywrod" placeholder="搜索筛选项">
       </el-input>

<div
               v-for="opt in searchOptions"
               class="opt-item"
               :title="`${opt._item.name}-${opt.name}`"
               @click="onSelectItem(opt._item, opt)"
               :key="opt.key"
           >
               <div class="opt-item-name ellipsis-2">
                   <span>
                       <span v-for="(name, key) in opt.nameArr" :key="key" :class="searchKeywrod === name && 'highlight-text'">{{ name }}</span>
                   </span>
               </div>
           </div>
下一篇 / css 导航栏实现缺口圆角效果

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)