pdf 搜索
This commit is contained in:
parent
941a95ae56
commit
7ce5ccdda6
|
|
@ -1,28 +1,31 @@
|
|||
<template>
|
||||
<div class="document-search">
|
||||
<div class="search-toolbar">
|
||||
<el-input v-model="keyword" class="search-input" placeholder="输入关键字搜索" clearable
|
||||
@keyup.enter.native="handleSearch" @clear="resetSearch">
|
||||
<el-button slot="append" class="search-btn" icon="el-icon-search" @click="handleSearch"
|
||||
:loading="searching" :disabled="searching">
|
||||
<span v-if="!searching">搜索</span>
|
||||
<span v-else>搜索中...</span>
|
||||
</el-button>
|
||||
</el-input>
|
||||
<div class="search-status" v-if="searchResults.length">
|
||||
<span class="result-indicator">{{ currentResultIndex + 1 }}/{{ searchResults.length }}</span>
|
||||
<el-button class="nav-btn" type="text" icon="el-icon-arrow-up" :disabled="!searchResults.length"
|
||||
@click="goToPrevious">
|
||||
上一处
|
||||
</el-button>
|
||||
<el-button class="nav-btn" type="text" icon="el-icon-arrow-down" :disabled="!searchResults.length"
|
||||
@click="goToNext">
|
||||
下一处
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="viewer-container">
|
||||
<div class="floating-search">
|
||||
<div class="search-toolbar">
|
||||
<div class="search-box">
|
||||
<el-input v-model="keyword" class="search-input" placeholder="输入关键字搜索" clearable
|
||||
@keyup.enter.native="handleSearch" @clear="resetSearch">
|
||||
</el-input>
|
||||
<button class="icon-btn search-icon" :disabled="searching" @click="handleSearch">
|
||||
<i class="el-icon-search" v-if="!searching"></i>
|
||||
<i class="el-icon-loading" v-else></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-status">
|
||||
<span class="result-indicator">{{ resultDisplay }}</span>
|
||||
<button class="icon-btn" :disabled="!searchResults.length" @click="goToPrevious">
|
||||
<i class="el-icon-arrow-up"></i>
|
||||
</button>
|
||||
<button class="icon-btn" :disabled="!searchResults.length" @click="goToNext">
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</button>
|
||||
<button class="icon-btn" :disabled="!keyword" @click="resetSearch">
|
||||
<i class="el-icon-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="pdfWrapper" class="pdf-wrapper"></div>
|
||||
|
||||
<transition name="fade">
|
||||
|
|
@ -89,6 +92,12 @@ export default {
|
|||
}
|
||||
return null
|
||||
},
|
||||
resultDisplay() {
|
||||
const total = this.searchResults.length
|
||||
if (!total) return '0/0'
|
||||
const current = this.currentResultIndex >= 0 ? this.currentResultIndex + 1 : 0
|
||||
return `${current}/${total}`
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -1131,7 +1140,7 @@ export default {
|
|||
height: calc(100vh - 84px);
|
||||
overflow: hidden;
|
||||
background: #f4f7ff;
|
||||
padding: 16px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
|
|
@ -1141,38 +1150,104 @@ export default {
|
|||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.floating-search {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: auto;
|
||||
max-width: calc(100% - 40px);
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 14px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: 999px;
|
||||
padding: 8px 12px;
|
||||
box-shadow: 0 8px 26px rgba(31, 114, 234, 0.18);
|
||||
border: 1px solid rgba(226, 231, 239, 0.8);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.search-toolbar > * {
|
||||
margin-left: 0;
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e7f0;
|
||||
border-radius: 999px;
|
||||
padding: 0 6px 0 10px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 0 0 360px;
|
||||
width: 360px;
|
||||
max-width: 100%;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.search-input ::v-deep .el-input__inner {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-input ::v-deep .el-input__suffix,
|
||||
.search-input ::v-deep .el-input__prefix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6c7388;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: rgba(64, 158, 255, 0.12);
|
||||
color: #2b68ff;
|
||||
}
|
||||
|
||||
.icon-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
background: #2b68ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-icon:hover {
|
||||
background: #1d4fd8;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #506dff;
|
||||
gap: 6px;
|
||||
color: #4f5875;
|
||||
font-size: 12px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid #e4e8f2;
|
||||
}
|
||||
|
||||
.result-indicator {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 0 8px;
|
||||
min-width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.viewer-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue