hookehuyr

🐞 fix(多行显示功能): 实现方法调整

......@@ -125,10 +125,10 @@ const onToggle = (v) => { // 展开/折叠
}
onMounted(() => {
setTimeout(() => {
// 判断是否显示简介的展开图标
nextTick(() => {
hasToggle.value = tools.hasEllipsis(`book-intro${props.item.id}`);
})
}, 500);
})
// 审核视频通过/不通过弹框
......
/*
* @Date: 2022-04-18 15:59:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-15 18:29:40
* @FilePath: /tswj/src/utils/tools.js
* @Description: 文件描述
*/
import moment from 'moment';
import { ref } from 'vue'
......@@ -30,7 +37,7 @@ const wxInfo = () => {
*/
const hasEllipsis = (id) => {
let oDiv = document.getElementById(id);
let flag = ref(false); // 关键,接收值必须都可监听
let flag = false;
if (oDiv.scrollHeight > oDiv.clientHeight) {
flag = true
}
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-21 09:35:14
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-14 21:44:30
* @LastEditTime: 2022-06-15 18:53:36
* @FilePath: /tswj/src/views/client/bookDetail.vue
* @Description:
-->
......@@ -17,7 +17,7 @@
<div class="book-intro">
<p class="book-post">{{ bookInfo.name }}</p>
<div id="book-intro" :class="{ 'van-multi-ellipsis--l3': isToggle }">{{ bookInfo.note }}</div>
<div v-if="hasToggle">
<template v-if="hasToggle">
<div v-if="isToggle" class="book-toggle-icon" @click="isToggle = false">
展开&nbsp;
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
......@@ -26,7 +26,7 @@
折叠&nbsp;
<van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
</div>
</div>
</template>
</div>
<van-sticky>
......@@ -155,17 +155,16 @@ const donateType = computed(() => {
onMounted(async () => {
const { data } = await prepareDonateAPI({ kg_id: $route.query.kg_id });
donateInfo.value = data;
setTimeout(() => {
// 判断是否显示简介的展开图标
hasToggle.value = hasEllipsis(`book-intro`);
}, 500);
})
// 判断是否显示简介的展开图标
const hasToggle = ref(false); // 判断是否有展开文字,默认没有
const isToggle = ref(true); // 判断展开状态,默认展开
nextTick(() => {
// 判断是否显示简介的展开图标
hasToggle.value = hasEllipsis('book-intro');
})
/**
* 书籍订阅
*/
......