hookehuyr

✨ feat(书籍详情页): 展开搜索简介功能优化调整

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
}
......
......@@ -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">展开&nbsp;
<div v-if="isToggle" @click="isToggle = false" class="book-toggle-icon">展开&nbsp;
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
</div>
<div v-else @click="onToggle(true)" class="book-toggle-icon">折叠&nbsp;
<div v-else @click="isToggle = true" class="book-toggle-icon">折叠&nbsp;
<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');
})
/**
......