今天在做一个仿博客主页,日记的部分想做成折叠展开的效果,这样比较有利于浏览和交互,然后想起知乎问答的页面效果,就很符合我想要的样式:
截图示例
因为之前没做过,不知从何下手,在网上查了大半天,一直想找最方便最简洁的代码……可惜大部分都很复杂,看着费劲,但确实给了我很多启发,于是我灵光一闪,开始自己头脑风暴:

  • 需求: 浏览时默认只显示前三行文本,剩余部分折叠,点击“展开阅读全文”显示完整文本,再点击文末的“收起”恢复折叠状态
  • 美化: “展开阅读全文”折叠杆挡住面板下端,并呈现半透明渐变效果
  • 技术: HTML + CSS + Vue.js

HTML代码:

<div id="example">
    <!-- 利用v-if…v-else切换 展开 和 收起 两个画面,template包裹多个元素 -->
    <template v-if="isHide">
        <!-- 只显示摘要的画面 -->
        <div class="hideBg">
            <p class="summary">{{ content }}</p>
            <div class="showBtn">
                <!-- 绑定点击事件onShow,点击展开全文 -->
                <a href="#" @click.stop.prevent="onShow">展开阅读全文&nbsp;
                    <!-- 向下的角箭头符号,用css画 -->
                    <span class="downArrow"></span>
                </a>
            </div>
        </div>
    </template>
    <template v-else>
        <!-- 显示完整内容的画面 -->
        <div class="showBg">
            <p>{{ content }}</p>
            <div class="hideBtn">
                <!-- 绑定点击事件onHide,点击收起内容 -->
                <a href="#" @click.stop.prevent="onHide">收起&nbsp;
                    <!-- 向上的角箭头符号 -->
                    <span class="upArrow"></span>
                </a>
            </div>
        </div>
    </template>
</div>

CSS代码:

/* 摘要背景板 */
.hideBg {
    width: 500px;
    background-color: #e9ecef;
    margin: 1.5rem;
    padding: 1.5rem;
    padding-bottom: 0;    /* 方便渐变层遮挡 */
    position: relative;    /* 用于子元素定位 */
}
/* 全文背景板,基本与摘要相同 */
.showBg {
    width: 500px;
    background-color: #e9ecef;
    margin: 1.5rem;
    padding: 1.5rem;
}
/* 摘要内容 */
.summary {
    overflow: hidden;    /* 隐藏溢出内容 */
    text-overflow: clip;    /* 修剪文本 */
    display: -webkit-box;    /* 弹性布局 */
    -webkit-box-orient: vertical;    /* 从上向下垂直排列子元素 */
    -webkit-line-clamp: 3;    /* 限制文本仅显示前三行 */
}
#example p {
    text-indent: 2em;
}
/* 展开按钮 */
.showBtn {
    width: 100%;    /* 与背景宽度一致 */
    height: 3rem;
    position: absolute;    /* 相对父元素定位 */
    top: 3rem;    /* 刚好遮挡在最后两行 */
    left: 0;
    z-index: 0;    /* 正序堆叠,覆盖在p元素上方 */
    text-align: center;
    background: linear-gradient(rgba(233,236,239,.5), white);    /* 背景色半透明到白色的渐变层 */
    padding-top: 3rem;
}
/* 收起按钮 */
.hideBtn {
    text-align: right;
}
#example a {
    text-decoration: none;    /* 清除链接默认的下划线 */
}
/* 向下角箭头 */
.downArrow {
    display: inline-block;
    width: 8px;    /* 尺寸不超过字号的一半为宜 */
    height: 8px;
    border-right: 1px solid;    /* 画两条相邻边框 */
    border-bottom: 1px solid;
    transform: rotate(45deg);    /* 顺时针旋转45° */
    margin-bottom: 3px;
}
/* 向上角箭头,原理与下箭头相同 */
.upArrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 1px solid;
    border-top: 1px solid;
    transform: rotate(45deg);
    margin-top: 3px;
}

JS代码:

var vm = new Vue({
    el: '#example',
    data: {
        content: "中华人民共和国位于亚洲东部,太平洋西岸 [1]  ,是工人阶级领导的、以工农联盟为基础的人民民主专政的社会主义国家 [2]  。1949年(己丑年)10月1日成立 [3-4]  ,以五星红旗为国旗 [5]  ,《义勇军进行曲》为国歌 [6]  ,国徽内容包括国旗、天安门、齿轮和麦稻穗 [7]  ,首都北京 [8]  ,省级行政区划为23个省、5个自治区、4个直辖市、2个特别行政区 [9]  ,是一个以汉族为主体民族,由56个民族构成的统一多民族国家,汉族占总人口的91.51% [10]  。新中国成立后,随即开展经济恢复与建设 [11]  ,1953年开始三大改造 [12]  ,到1956年确立了社会主义制度,进入社会主义探索阶段 [13]  。文化大革命之后开始改革开放,逐步确立了中国特色社会主义制度。 [14] 中华人民共和国陆地面积约960万平方公里,大陆海岸线1.8万多千米,岛屿岸线1.4万多千米,内海和边海的水域面积约470多万平方千米。海域分布有大小岛屿7600多个,其中台湾岛最大,面积35798平方千米。 [1]  陆地同14国接壤,与6国海上相邻。",
        isHide: true    //初始值为true,显示为折叠画面
    },
    methods: {
        onShow: function(){
            this.isHide = false;    //点击onShow切换为false,显示为展开画面
        },
        onHide: function(){
            this.isHide = true;    //点击onHide切换为true,显示为折叠画面
        }
    }
})

效果示例:

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐