jin-yufeng/mp-html

Search 插件开启 anchor 功能,高亮的元素排版错误

bunajianke opened this issue · 2 comments

使用环境

版本:mp-html 2.3.2
微信小程序基础库版本:2.25.3

问题描述

使用 Search 插件提供的高亮功能,开启锚点功能后,能正常高亮匹配到的关键词,且可以滚动到锚点,但是高亮的元素会独占一行(形同 display: block;),尝试在高亮样式上加入 display: inline; ,无效。尝试修改源码,把 span 的 node type 改成 text,高亮元素直接不显示

复现方式

<template>
  <mp-html ref="parser" selectable :use-anchor="true" :tagStyle="tagStyle" :content="content" @load="domLoaded">
</template>
export default {
  methods: {
    domLoaded() {
      const { keyword } = this
      const useAnchor = true
      const style = 'display:inline; background-color: yellow; color: #333; font-weight: bold;'
      if (keyword) {
        this.$refs.parser.search(keyword, useAnchor, style).then(res => {
          res.jump(1, 50)
        })
      }
    }
  }
}

关键词为”管理“
image

不使用 anchor 功能时,排版正常。
image

vue3?

vue3?

uniapp vue3 模式