vue-点击高亮

这里写目录标题


在这里插入图片描述

html

   <div class="arrange_content_bottom">
            <div class="arrange_content_bottom_floor" v-for="(i,v) in fj" :key="v">
              {{i.floorNo}}<div class="arrange_content_bottom_title">
                <div
                  v-for="(k,d) in i.roomList"
                  :key="d"
                  @click="floor(k,d)"
                  :class="{arrange_content_bottom_floordiv:k.liveStatus == '1',arrange_content_bottom_floordiv_no:k.liveStatus == '2',active:active == k.roomNo}"
                >
                  <div class="arrange_content_bottom_floor_num">{{k.roomNo}}</div>
                  <div class="arrange_content_bottom_floor_type" v-if="k.liveStatus == 1">可用</div>
                  <div class="arrange_content_bottom_floor_type" v-if="k.liveStatus == 2">不可用</div>
                  <div class="arrange_content_bottom_floor_yzc">已入住:{{k.livedCount}}</div>
                  <div class="arrange_content_bottom_floor_yzc">{{k.personNames}}</div>
                </div>
              </div>
            </div>
          </div>

js

    // 点击房间
    floor(i, v) {
      console.log("房间", i);
      console.log("序号", v);
      this.hotelRoomId = i.hotelRoomId;
      if (i.liveStatus == "1") {
        this.active = i.roomNo;
      }
    },

css

.active {
  background-color: green !important;
}
### 实现 Vue.js 中 PDF 高亮功能的方法 在 Vue.js 中实现 PDF 文档的高亮功能可以通过结合 `pdf.js` 和其他辅助库来完成。以下是详细的说明: #### 1. **基础依赖** 为了实现 PDF 的加载和显示,可以使用 Mozilla 提供的开源库 `pdf.js`[^1]。该库支持解析和渲染 PDF 文件的内容。 安装 `pdf.js` 及其相关依赖项: ```bash npm install pdfjs-dist --save ``` #### 2. **PDF 加载与渲染** 通过 `pdf.js` 获取 PDF 页面并将其绘制到 Canvas 上。这是实现高亮的基础步骤之一。 以下是一个简单的示例代码片段展示如何加载 PDF 并渲染第一页: ```javascript import { getDocument } from 'pdfjs-dist'; export default { data() { return { pdfDoc: null, currentPage: 1, }; }, methods: { async loadPdf(url) { this.pdfDoc = await getDocument(url).promise; this.renderPage(this.currentPage); }, renderPage(num) { const page = this.pdfDoc.getPage(num); const canvas = document.getElementById('pdfCanvas'); const ctx = canvas.getContext('2d'); const viewport = page.getViewport({ scale: 1.5 }); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: ctx, viewport: viewport, }; page.render(renderContext); } }, }; ``` #### 3. **文本提取与匹配** 要实现高亮功能,需要先从 PDF 中提取文本内容,并找到目标关键字的位置。`pdf.js` 支持通过 API 提取每页的文字信息。 下面是如何提取文字的一个例子: ```javascript async highlightText(pageNumber, keyword) { const page = await this.pdfDoc.getPage(pageNumber); // Extract text content const textContent = await page.getTextContent(); const keywordsPositions = []; textContent.items.forEach((item, index) => { if (item.str.includes(keyword)) { keywordsPositions.push(index); // Record positions of matched items. } }); console.log(`Keyword "${keyword}" found at indices ${keywordsPositions}`); } ``` #### 4. **应用高亮效果** 一旦找到了关键字所在位置,就可以利用 SVG 或者 Canvas 绘制矩形框覆盖这些区域以达到视觉上的高亮效果。这里提供一种基于 Canvas 的方法: 修改之前的 `renderPage()` 函数,在原有基础上增加高亮逻辑: ```javascript page.render(renderContext).then(() => { // Highlight logic after rendering the base layer this.highlightKeywords(ctx, pageNumber, keyword); }); highlightKeywords(canvasCtx, pageNumber, keyword) { const page = this.pdfDoc.getPage(pageNumber); page.getTextContent().then(textContent => { let lastY = -Infinity; // Track previous line's Y coordinate to merge rectangles. textContent.items.forEach(item => { if (!item.str.toLowerCase().includes(keyword.toLowerCase())) return; const rect = item.transform.slice(4); // Get bounding box coordinates. const xScaleFactor = canvasCtx.canvas.width / page.view[2]; const yScaleFactor = canvasCtx.canvas.height / page.view[3]; const scaledRect = [ rect[4] * xScaleFactor, rect[5] * yScaleFactor, Math.abs(rect[0]) * xScaleFactor, Math.abs(rect[1]) * yScaleFactor, ]; if (scaledRect[1] === lastY && scaledRect[0] !== Infinity) { prevScaledRect[2] += scaledRect[2]; // Merge horizontally adjacent rects. } else { drawHighlight(prevScaledRect); // Draw accumulated rectangle before resetting it. prevScaledRect = [...scaledRect]; lastY = scaledRect[1]; } function drawHighlight([x, y, width, height]) { if (!(width > 0 && height > 0)) return; canvasCtx.fillStyle = 'rgba(255, 255, 0, 0.5)'; canvasCtx.fillRect(x, y, width, height); } }); drawHighlight(prevScaledRect); // Ensure final rectangle gets drawn too. }); } ``` 以上代码会遍历所有包含给定关键词的文本块,并在其周围画上半透明黄色背景作为高亮标记。 --- ### 注意事项 - 如果希望更复杂的交互体验(比如点击跳转特定页面),还可以参考引用中的 iframe 控制技巧[^2]。 - 对于大型项目建议考虑封装成独立组件以便重用和维护方便。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值