js中的正则表达式 使用Docker和Elasticsearch搭建全文本搜索引(18)

asyncshowBookModal(searchHit) {

try{

document.body.style.overflow = 'hidden'

this.selectedParagraph = searchHit

this.paragraphs = awaitthis.getParagraphs(searchHit._source.title, searchHit._source.location - 5)

} catch(err) {

console.error(err)

}

},

/** Close the book detail modal */

closeBookModal () {

document.body.style.overflow = 'auto'

this.selectedParagraph = null

}

以上五个功能块提供在书中下载和分页（每页显示10段）逻辑操作。

在/public/index.html 中的分界符下加入显示书页的UI代码如下：

<!-- Book Paragraphs Modal Window -->

<divv-if="selectedParagraph"ref="bookModal"class="book-modal">

<divclass="paragraphs-container">

<!-- Book Section Metadata -->

<divclass="title-row">

<divclass="mui--text-display2 all-caps">{{ selectedParagraph._source.title }} </div>

<divclass="mui--text-display1">{{ selectedParagraph._source.author }} </div>

</div>

<br>

<divclass="mui-divider"></div>

<divclass="mui--text-subhead locations-label">Locations {{ bookOffset - 5 }} to {{ bookOffset + 5 }} </div>

<divclass="mui-divider"></div>

<br>

<!-- Book Paragraphs -->

<divv-for="paragraph in paragraphs">

<divv-if="paragraph._source.location === selectedParagraph._source.location"class="mui--text-body2">

<strong>{{ paragraph._source.text }} </strong>

</div>

<divv-elseclass="mui--text-body1">

{{ paragraph._source.text }}

</div>

<br>

</div>

</div>

<!-- Book Pagination Footer -->

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-88488-18.html