Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
tswj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2022-05-17 13:43:48 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
c77f563e252030cbb0f34a2c994f61824978a645
c77f563e
1 parent
f2ad5f94
✨ feat(书籍详情页): 展开搜索简介功能优化调整
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
6 additions
and
20 deletions
src/utils/tools.js
src/views/client/bookDetail.vue
src/utils/tools.js
View file @
c77f563
import
moment
from
'moment'
;
import
{
ref
,
nextTick
}
from
'vue'
// 格式化时间
const
formatDate
=
(
date
)
=>
{
...
...
@@ -24,7 +25,7 @@ const wxInfo = () => {
*/
const
hasEllipsis
=
(
id
)
=>
{
let
oDiv
=
document
.
getElementById
(
id
);
let
flag
=
false
let
flag
=
ref
(
false
);
// 关键,接收值必须都可监听
if
(
oDiv
.
scrollHeight
>
oDiv
.
clientHeight
)
{
flag
=
true
}
...
...
src/views/client/bookDetail.vue
View file @
c77f563
...
...
@@ -9,10 +9,10 @@
<p class="book-post">{{ bookInfo.name }}</p>
<div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">{{ bookInfo.note }}</div>
<div v-if="hasToggle">
<div v-if="isToggle" @click="
onToggle(false)
" class="book-toggle-icon">展开
<div v-if="isToggle" @click="
isToggle = false
" class="book-toggle-icon">展开
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
</div>
<div v-else @click="
onToggle(true)
" class="book-toggle-icon">折叠
<div v-else @click="
isToggle = true
" class="book-toggle-icon">折叠
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
</div>
</div>
...
...
@@ -116,7 +116,7 @@
</template>
<script setup>
import { ref,
nextTick, onActivated, onMounted, onUpdated
} from 'vue'
import { ref,
onActivated, nextTick
} from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, hasEllipsis } from '@/utils/generatePackage.js'
...
...
@@ -137,24 +137,9 @@ const { donateItem } = useDefaultPerf($route.query.id);
const hasToggle = ref(false); // 判断是否有展开文字,默认没有
const isToggle = ref(true); // 判断展开状态,默认展开
/**
* 展开/折叠
* @param {*} v
*/
const onToggle = (v) => {
isToggle.value = v
}
// DOM操作需要等待执行
setTimeout(() => {
nextTick(() => {
// 判断是否显示简介的展开图标
// nextTick(() => {
// hasToggle.value = hasEllipsis('book-intro');
// })
hasToggle.value = hasEllipsis('book-intro');
}, 500);
onUpdated(() => {
// hasToggle.value = hasEllipsis('book-intro');
})
/**
...
...
Please
register
or
login
to post a comment