动态型网站建设,网站外链平台,江门网站免费制作,带漂浮广告的网站实现弹窗展示富文本数据#xff0c;允许全文搜索高亮显示搜索内容 #x1f449; 前言#x1f449; 一、效果演示#x1f449; 二、实现思路#x1f449; 三、实现案例#x1f44d; 卷王必胜#xff01;往期内容 #x1f4a8; #x1f449; 前言
在 Vue elementUi 开… 实现弹窗展示富文本数据允许全文搜索高亮显示搜索内容 前言 一、效果演示 二、实现思路 三、实现案例 卷王必胜往期内容 前言
在 Vue elementUi 开发中遇到需要实现一个富文本展示 且 需要实现富文本全文搜索高亮对应搜索内容。显示关键词出现次数允许上下按顺序切换实现滚动条定位到对应关键词位置
接下来简单阐述下开发中使用方法 一、效果演示
话不多说先上效果图 白嫖万岁当然如果有帮助希望不要吝啬你的点赞呀 以上数据来源于互联网记载的国内法律法规条例文献 二、实现思路
通过 v-html 将富文本解析到页面指定位置展示并且预设的 class名称通过 document.querySelectorAll() 查询已渲染到页面的内容。
通过正则 htmlContent.replace(new RegExp(this.keyword, g), 替换内容。替换内容通常为html样式的keyword)
其实不难发现在vue和 JavaScript 中进行全文搜索有些许不同。由于其中搜索的HTML是我们通过 v-html渲染 到页面上它享有Vue数据双向绑定的特性我们其实只需要对v-html绑定的变量参数进行修改即可实时渲染到页面。当然有些标签属性变更使用JavaScript来修改可能会更加高效一点。
稍微增加一点切换的滚动条挪动 及 样式清除细节逻辑直接看代码吧 简单易懂 三、实现案例 父组件中引用
template
fullTextSearchDialogv-iflawDialogVisiblereffullTextSearchDialog:curTitlecurTitle:contentlawFullTextclosecloseLawFullTextDialog
/
/templatescript
import fullTextSearchDialog from /views/components/dialog/fullTextSearchDialog.vue;data() {return {lawDialogVisible: false,curTitle: ,lawFullText: ,}
}
methods: {// 打开法律法规全文openLawFullTextDialog(item) {this.curTitle item.title;this.lawFullText item.fullText;this.lawDialogVisible truesetTimeout(() {this.$refs.fullTextSearchDialog.openDialog()}, 0)},// 关闭全文弹窗closeLawFullTextDialog() {this.curTitle ;this.lawFullText this.lawDialogVisible false},
}
/script子组件模板
templateel-dialog:titlecurTitle -全文:visible.synclawDialogVisiblewidth61.7%height500:close-on-click-modaltrue:modalfalsecustom-classabolishDialogclosehandleClosediv classlawContentdiv classsearchBox全文内容搜索el-inputplaceholder请输入关键词v-modelkeywordclassinput-with-select:clearablefalsestylewidth: calc(100% - 240px);div classindexChange slotsuffixspan classindex{{ searchIndex / searchAllIndexs }}/spandiv classbtnBoxi classel-icon-arrow-up clicksearchIndexDown/ii classel-icon-arrow-down clicksearchIndexUp/i/div/div/el-inputel-button typeprimary sizemini clicklawFullTextSearch查 询/el-buttonel-button sizemini clickresetSearch(true)重 置/el-button/divdiv classfullTextContentpv-ifrefreshstylewidth: 100%;v-htmllawFullText || 暂无数据classel-tiptap-editor__content/p/div/div/el-dialog
/templatescript
export default {components: {},props: {curTitle: {type: String,default: () {return 提示;},},content: {type: String,default: () {return ;},},},data() {return {lawDialogVisible: false, //弹框显隐lawFullText: ,searchIndex: 0,searchAllIndexs: 0,keyword: ,refresh: true,};},mounted() {this.lawFullText JSON.parse(JSON.stringify(this.content))},watch: {},computed: {},methods: {/*** description:打开弹框回调*/openDialog() {this.lawDialogVisible true;},// 法律法规全文内容关键词搜索高亮lawFullTextSearch() {// window.console.log(this.keyword)if (this.keyword this.keyword ! this.lawFullText.indexOf(this.keyword) ! -1) {this.searchAllIndexs (this.lawFullText.split(this.keyword).length - 1) || 0this.searchIndex 1this.lawFullText this.lawFullText.replace(new RegExp(this.keyword, g), em classsearchText${this.keyword}/em); // 通过正则全局匹配关键字查出来的文字进行高亮替换setTimeout(() {let allSearchIndex document.querySelectorAll(em)allSearchIndex[this.searchIndex - 1].className curSearchText// 使滚动条滚动到指定位置this.scrollChange()}, 0)} else {this.resetSearch()this.$message.info(无当前查询内容 或 未输入关键词)}},// 重置搜索内容resetSearch(resetKey false) {if(resetKey) {this.keyword }this.searchAllIndexs 0;this.searchIndex 0;// 清除上次的查询记录this.lawFullText this.lawFullText.replace(new RegExp(/?em.*?, gi), );// 刷新this.refresh false;setTimeout(() {this.refresh true;}, 0)},// 查询内容上一个searchIndexUp() {if(this.searchIndex 0 this.searchIndex this.searchAllIndexs this.searchAllIndexs 0) {this.searchIndex (this.searchIndex 1) this.searchAllIndexs ? 1 : (this.searchIndex 1)setTimeout(() {let allSearchIndex document.querySelectorAll(em)// 清除上一个选中样式allSearchIndex[this.searchIndex - 2 0 ? this.searchAllIndexs - this.searchIndex : this.searchIndex - 2].className searchTextallSearchIndex[this.searchIndex - 1].className curSearchText// 使滚动条滚动到指定位置this.scrollChange()}, 0)} else {this.searchIndex 0}},// 查询内容下一个searchIndexDown() {if(this.searchIndex 0 this.searchIndex this.searchAllIndexs this.searchAllIndexs 0) {this.searchIndex (this.searchIndex - 1) 0 ? this.searchAllIndexs : (this.searchIndex - 1)setTimeout(() {let allSearchIndex document.querySelectorAll(em)// 清除上一个选中样式allSearchIndex[this.searchIndex this.searchAllIndexs - 1 ? this.searchAllIndexs - this.searchIndex : this.searchIndex].className searchTextallSearchIndex[this.searchIndex - 1].className curSearchText// 使滚动条滚动到指定位置this.scrollChange()}, 0)} else {this.searchIndex 0}},/*** description:关闭弹框回调*/handleClose() {this.lawDialogVisible false;setTimeout(() {this.lawFullText this.keyword this.searchIndex 0this.searchAllIndexs 0this.$emit(close)}, 0)},// 滚动条定位scrollChange() {let fullTextDom document.querySelector(.fullTextContent)let curDom document.querySelector(.curSearchText).parentNode// window.console.log(curDom, curDom.offsetTop)fullTextDom.scrollTop curDom.offsetTop - 137 || 0},},
};
/scriptstyle langscss scoped
/deep/ {.abolishDialog {background: #ffffff !important;border: 1px solid #cccccc !important;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);border-radius: 4px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin-top: 0 !important;min-width: 480px;.lawContent {height: 50vh;min-height: 500px;display: flex;align-content: space-around;flex-wrap: wrap;.searchBox {width: 100%;display: flex;justify-content: space-around;align-items: center;.el-input__inner {padding-right: 100px;}.el-input__suffix-inner {width: 90px;display: flex;justify-content: space-between;.indexChange {width: 100%;display: flex;justify-content: space-around;align-items: center;.btnBox {display: flex;flex-direction: column;margin: 0 5px;}}}}.fullTextContent {width: 100%;height: calc(100% - 70px);padding-top: 20px;overflow-y: auto;.searchText {background-color: yellow;color: #333;font-weight: bold;margin: 0 3px;padding: 2px;border-radius: 5px;}.curSearchText {background-color: red;color:white;padding: 3px;font-weight: bold;margin: 0 3px;padding: 2px;border-radius: 5px;}}}.el-dialog__header {border-bottom: 0.5px solid #cccccc !important;padding: 0 15px;font-weight: bold;display: flex;align-items: center;justify-content: space-between;.el-dialog__headerbtn {width: 20px;position: relative;top: 0;right: 0;}// height: 48px !important;}.el-dialog__body {// min-height: 100px;padding: 15px;.title {font-size: 10.5px;color: #f56c6c;text-align: right;margin-top: 15px;}}.el-dialog__footer {border-top: 0.5px solid #cccccc !important;padding: 10px;}}
}
/style案例较为粗浅仅供参考 卷王必胜
如果本篇文章对您有所帮助 请不要吝惜您的小手给小温来个小小的点赞您的支持是对小温无比的认同 往期内容 每日算法一文带你认识 “ 双指针算法 ” 每日小技巧 基于Vue状态的过渡动画 - Transition 和 TransitionGroup JavaScript技术分享 大文件切片上传 及 断点续传思路 每日份知识快餐axios是什么如何在Vue中 封装 axios 面试知识点什么是 Node.js 有哪些优缺点应用场景
