word 文档搜索
This commit is contained in:
parent
e2b9f60f8a
commit
fa8337b2f9
|
|
@ -1,28 +1,36 @@
|
|||
<template>
|
||||
<div class="document-search-word">
|
||||
<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">
|
||||
<transition name="slide-fade">
|
||||
<div v-if="showSearchBar" class="floating-search">
|
||||
<div class="search-toolbar" :class="{ 'is-searching': searching }">
|
||||
<div class="search-box">
|
||||
<el-input v-model="keyword" class="search-input" placeholder="输入关键字搜索" clearable
|
||||
ref="keywordInput" @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" @click="handleCloseSearch">
|
||||
<i class="el-icon-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<button v-if="!showSearchBar" class="floating-search-btn" @click="toggleSearchBar">
|
||||
<i class="el-icon-search"></i>
|
||||
</button>
|
||||
<div ref="docWrapper" class="doc-wrapper">
|
||||
<div ref="docxContainer" class="doc-content"></div>
|
||||
</div>
|
||||
|
|
@ -59,6 +67,14 @@ export default {
|
|||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
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 {
|
||||
docUrl: '',
|
||||
|
|
@ -72,6 +88,7 @@ export default {
|
|||
docRendered: false,
|
||||
abortController: null,
|
||||
scrollAnimationFrame: null,
|
||||
showSearchBar: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -102,6 +119,19 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
toggleSearchBar() {
|
||||
this.showSearchBar = true
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.keywordInput) {
|
||||
this.$refs.keywordInput.focus()
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCloseSearch() {
|
||||
this.keyword = ''
|
||||
this.resetSearch()
|
||||
this.showSearchBar = false
|
||||
},
|
||||
applyDocUrl(url) {
|
||||
const resolved = url || ''
|
||||
if (resolved === this.docUrl) {
|
||||
|
|
@ -899,34 +929,168 @@ export default {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.floating-search {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: auto;
|
||||
max-width: calc(100% - 40px);
|
||||
z-index: 6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.floating-search-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: #2b68ff;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 26px rgba(31, 114, 234, 0.25);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.floating-search-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 30px rgba(31, 114, 234, 0.3);
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
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;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-toolbar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 4px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-toolbar.is-searching::after {
|
||||
border-color: rgba(43, 104, 255, 0.4);
|
||||
animation: search-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes search-pulse {
|
||||
0% {
|
||||
opacity: 0.25;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.25;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-fade-enter-active,
|
||||
.slide-fade-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-fade-enter,
|
||||
.slide-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.result-indicator {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
color: #4f5875;
|
||||
padding-left: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue