Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bunajianke opened this issue Aug 16, 2022 · 2 comments
Closed

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

bunajianke opened this issue Aug 16, 2022 · 2 comments
Labels
bug Something isn't working

Comments

@bunajianke
Copy link

bunajianke commented Aug 16, 2022

使用环境

版本: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

@jin-yufeng
Copy link
Owner

vue3?

@jin-yufeng jin-yufeng added the bug Something isn't working label Aug 16, 2022
@bunajianke
Copy link
Author

vue3?

uniapp vue3 模式

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants