当前位置: 首页 > news >正文

vue实现搜索文章关键字,滑到指定位置并且高亮

 1、输入搜索条件,点击搜索按钮

2、滑到定位到指定的搜索条件。 

 

<template><div><div class="search_form"><el-inputv-model="searchVal"placeholder="请输入关键字查询"clearablesize="small"style="width: 300px;"></el-input><el-button@click="searchFunc"type="primary"size="small"style=""><i class="el-icon-search"></i> 查询</el-button></div><div class="editor" v-html="content"></div></div>
</template>
<script>
import { listContraband } from '@/api/transCapacity/order'
export default{data() {return {searchVal: null,cacheContent: null,content: null,searchKey: '',}},created() {this.getContraband()},methods: {getContraband(){listContraband().then((response) => {this.$nextTick(()=>{this.content = response.data.contentthis.cacheContent = response.data.content})}).catch(()=>{})},searchFunc() {if (this.searchVal !== '') {const regex = new RegExp(this.searchVal, 'gi');this.content = this.cacheContent.replace(regex, `<div class="targetElement"><mark style="background-color:#yellow;color:#FF6A29">`+ this.searchVal +`</mark></div>`)setTimeout(() => {this.scrollToElement();}, 100);}},scrollToElement() {this.$nextTick(() => {const element = document.querySelector('.targetElement')if (element) {element.scrollIntoView({ behavior: 'smooth' });}});},}
}
</script>
<style lang="scss" scoped>::v-deep .search_form {display: flex;padding-bottom: 10px;.el-input__inner {border-top-right-radius: 0;border-bottom-right-radius: 0;}.el-button {border-top-left-radius: 0;border-bottom-left-radius: 0;}}::v-deep table {border-top: 1px solid #ccc;border-left: 1px solid #ccc;border-spacing: 0;}::v-deep table td {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;padding: 5px;}::v-deep table th {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;padding: 5px;}::v-deep table th {border-bottom: 2px solid #ccc;}
</style>

相关文章:

vue实现搜索文章关键字,滑到指定位置并且高亮

1、输入搜索条件&#xff0c;点击搜索按钮 2、滑到定位到指定的搜索条件。 <template><div><div class"search_form"><el-inputv-model"searchVal"placeholder"请输入关键字查询"clearablesize"small"style&quo…...

Stable Diffusion与AI艺术:探索人工智能的创造力

引言 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;AI艺术逐渐走进了公众视野。尤其是近年来&#xff0c;Stable Diffusion等技术的出现&#xff0c;显著提升了AI在艺术创作领域的表现力和创造力。这篇文章将深入探讨Stable Diffusion技术的工作原理、应…...

华为HCIP Datacom H12-821 卷26

1.单选题 在VRRP中&#xff0c;同一备份组的设备在进行VRRP报文认证时&#xff0c;以下哪一参数不会影响Master设备和Backup设备认证协商结果 A、认证字 B、优先级 C、认证方式 D、VRRP版本 正确答案&#xff1a; B 解析&#xff1a; 优先级只会影响谁是主谁是备&…...

golang 获取系统的主机 CPU 内存 磁盘等信息

golang 获取系统的主机 CPU 内存 磁盘等信息 要求 需要go1.18或更高版本 官方地址&#xff1a;https://github.com/shirou/gopsutil 使用 #下载包 go get github.com/shirou/gopsutil/v3/cpu go get github.com/shirou/gopsutil/v3/disk go get github.com/shirou/gopsuti…...

Infinitar链游新发展新机遇

区块链游戏市场在近年来经历了显著增长&#xff0c;吸引了大量的投资和关注。随着加密货币和NFT&#xff08;非同质化代币&#xff09;概念的普及&#xff0c;越来越多的投资者、游戏开发者和看到了区块链技术在游戏领域的应用潜力&#xff0c;纷纷涌入市场。区块链游戏的用户量…...

Figma 被爆出它剽窃了苹果的设计后撤下了AI工具Make Designs

Figma是一款流行的界面设计工具&#xff0c;最近它推出了一个名为Make Designs的新功能&#xff0c;这个功能利用人工智能帮助用户快速设计应用程序界面。但是&#xff0c;这个工具生成的设计竟然和苹果公司的iOS天气应用非常相似&#xff0c;这让外界怀疑Figma是否剽窃了苹果的…...

ERROR | Web server failed to start. Port 8080 was already in use.

错误提示&#xff1a; *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 8080 was already in use.Action:Identify and stop the process thats listening on port 8080 or configure thi…...

C++ 类和对象 构造函数

一 类的6个默认成员函数&#xff1a; 如果一个类中什么成员都没有&#xff0c;简称为空类。 例&#xff1a; #include <iostream> class Empty {// 空类&#xff0c;什么成员都没有 }; 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&a…...

纯javascript实现图片批量压缩打包zip下载后端ThinkPHP多国语言切换国际站

最近在做一个多国语言的工具站&#xff0c;需要实现多国语言切换&#xff0c;说到多国语言站&#xff0c;肯定是有2种方式&#xff0c;第一是子域名&#xff0c;第二就是子目录。根据自己的需要来确定。 后台配置如下&#xff1a; 前台显示&#xff1a; 前端纯javascript实现…...

使用ChatGPT写论文,只需四步突破论文写作瓶颈!

欢迎关注&#xff0c;为大家带来最酷最有效的智能AI学术科研写作攻略。关于使用ChatGPT等AI学术科研的相关问题可以和作者七哥&#xff08;yida985&#xff09;交流 地表最强大的高级学术AI专业版已经开放&#xff0c;拥有全球领先的GPT学术科研应用&#xff0c;有兴趣的朋友可…...

神领物流项目第一天

文章目录 聚焦快递领域首先第一个是验证码模块流程登录接口权限管家 聚焦快递领域 首先第一个是验证码模块流程 首先生成验证码的流程 可以使用工具类去生成验证码 LineCaptcha lineCaptcha CaptchaUtil.createLineCaptcha(160, 60, 4, 26);// 获取值然后存入redis中 strin…...

[作业]10 枚举-排列类

作业&#xff1a; 已做&#xff1a; #include <iostream> using namespace std; int n; int a[100]; void func(int ,int); int main(){cin>>n;func(0,n);return 0; } void func(int k,int m){if(k>m-1){for(int i0;i<m;i){cout<<a[i];}cout<<en…...

vue2(vue-cli3x[vue.config.js])使用cesium新版(1.117.0)配置过程

看来很多解决方法都没有办法&#xff0c;最后终于。呜呜呜呜 这里我用的是vue-cli去搭建的项目的vue2 项目&#xff0c;其实不建议用vue2搭配cesium。因为目前cesium停止了对vue2的版本更新&#xff0c;现在默认安装都是vue3版本&#xff0c;因此需要控制版本&#xff0c;否则…...

【深度学习】常用命令行指令汇总

这些指令对于管理深度学习环境、监控资源使用、调试程序等方面 查看显卡使用情况 要实时监控NVIDIA显卡的状态,可以使用命令: nvidia-smi -l 1这条命令会每秒刷新一次显卡的使用情况,包括GPU利用率、显存使用情况等。 查看当前Python环境 查看当前使用的Python环境,可…...

谷粒商城学习-11-docker安装redis

文章目录 一&#xff0c;拉取Redis镜像1&#xff0c;搜索Redis的Docker镜像2&#xff0c;拉取Redis镜像3&#xff0c;查看已经拉取的镜像 二&#xff0c;创建、启动Redis容器1&#xff0c;创建redis配置文件2&#xff0c;创建及运行Redis容器3&#xff0c;使用docker ps查看运行…...

C++:类继承是什么,怎么继承

一、类继承是什么 首先了解什么是基类&#xff0c;什么是派生类 在面向对象编程中&#xff0c;基类&#xff08;Base Class 或 Superclass&#xff09;是一个类的模板&#xff0c;它定义了一些通用的属性和行为。子类&#xff08;Derived Class 或 Inheritance&#xff09;可…...

期权学习必看圣书:《3小时快学期权》要在哪里看?

今天带你了解期权学习必看圣书&#xff1a;《3小时快学期权》要在哪里看&#xff1f;《3小时快学期权》是一本关于股票期权基础知识的书籍。 它旨在通过简明、易懂的语言和实用的案例&#xff0c;让读者在短时间内掌握股票期权的基本概念、操作方法和投资策略。通过这本书&…...

Keepalived 双机热备

1. Keepalived 双机热备 keepalived主要用来提供故障切换&#xff08;failover&#xff09;和健康检查&#xff08;Health Checking&#xff09;。 1.2 Keepalived 热备方式 Keepalived 采用VRRP &#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗…...

基于React和TypeScript的开源白板项目(Github项目分享)

在学习前端开发的过程中&#xff0c;有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目——NinjaSketch&#xff0c;这是一个用React和TypeScript构建的简易白板工具。这个项目使用了Rough.js来实现手绘风格的效果。尽管这个应用不是响应…...

1019记录

人瑞 - SDK - 外派米哈游 1&#xff0c;接口测试的工具 回答的是postman&#xff0c; 改进&#xff1a;JMeter 2&#xff0c;接口502&#xff0c;什么问题导致的&#xff1f;如何定位&#xff1f; 参考答案&#xff1a;502错误定义&#xff1a;是网关错误&#xff0c; 通俗…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...