使用css如何获取最后一行的元素？使用css解决双边框问题

news2024/9/22 5:38:49

一、项目场景：

在小程序上需要实现一个如下图的ui效果图
需要满足以下条件

一行放不下自动换行
最后一行或者只有一行时，文字底部不能有线

二、初版实现

按照上面的要求，最开是的实现代码如下
我是给每一个元素都添加了一个下边框，但是这样的话，在最后一行的时候，会出现边框重合的情况

效果图如下，最后一行放大可发现有重叠部分，颜色加重
在这里插入图片描述

<template>
    <div class="box">
        <div class="Rp">
            <div class="h4">Rp</div>
            <div class="herb-box">
                <div v-for="(item, index) in list" :key="index" class="herb">
                    <div class="name">{{ item.name }}</div>
                    <div class="weight">{{ item.weight }}g</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const list = ref([
    { name: '阿莫西林', weight: 5 },
    { name: '阿莫阿莫西林阿莫西林', weight: 8 },
    { name: '西林', weight: 10 },
    { name: '阿西林', weight: 30 },
    { name: '阿到付贵莫西林', weight: 3 },
    { name: '时代峰', weight: 10 },
    { name: '阿莫西林', weight: 10 },
    { name: '发', weight: 5 },
    { name: '阿莫西林', weight: 5 }
])
</script>
<style lang="scss" scoped>
.box {
    padding: 20rpx 32rpx 40rpx 32rpx;
    .Rp {
        width: 686rpx;
        background-color: #f7f8fa;
        border-radius: 16rpx;
        border: 2rpx solid #ced6e2;
        margin-bottom: 32rpx;
        padding-top: 12rpx;
        .h4 {
            font-weight: 600;
            font-size: 40rpx;
            color: #7089ab;
            margin-bottom: 12rpx;
            margin-left: 24rpx;
        }
        .herb-box {
            display: flex;
            flex-wrap: wrap;
            padding: 0 24rpx;
            .herb {
                display: flex;
                align-items: center;
                padding: 18rpx;
                padding-left: 0;
                border-bottom: 2rpx solid #e6e6e6; // 真实的内部元素边框
                position: relative;
                .name {
                    margin-right: 8rpx;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #435675;
                }
                .weight {
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #435675;
                }
            }
        }
    }
}
</style>

三、解决思路：

1.使用css获取最后一行的元素——pase

我只要知道最后一行中有哪几个元素，然后给最后一行的元素设置border-bottom:none就行了
但是 :last-child 只能获取到最后一个元素
:nth-last-child 需要知道一排要有几个元素才行

2.使用伪元素或者是一个新的标签定位做遮盖——pase

想法就是使用一个新的元素，模仿背景色，做一个覆盖，感觉上是可行的
但是会造成dom结构的破坏，使用伪元素在真正定位的时候，会出现颜色透传

3.使用ref计算每个元素的宽度，然后动态设置`class`

这种是可以实现ui图的功能，但是感觉有点大材小用，高射炮打蚊子。
本人是很不喜欢使用js解决css的问题
理由如下：

性能不好
太low 不够优雅

computed: {
    // 计算哪些元素在最后一行
    isInLastRow() {
        const containerWidth = this.$refs.herbBox.offsetWidth; // herb-box 的宽度
        let currentRowWidth = 0;
        let lastRowIndex = 0;

        return (index) => {
            const herbElement = this.$refs[`herb-${index}`][0]; // 取出当前元素的 DOM 对象
            const herbWidth = herbElement.offsetWidth;

            if (currentRowWidth + herbWidth > containerWidth) {
                currentRowWidth = herbWidth; // 开始新的一行
                lastRowIndex = index;
            } else {
                currentRowWidth += herbWidth;
            }

            // 返回 true 表示在最后一行
            return index >= lastRowIndex;
        };
    }
}

4.使用margin+伪元素解决

在偶然的机会查到了双边框的问题，之前倒是知道这个，一直没有遇到过。
这突然遇到了，第一时间没有想起来，真的是太菜了

双边框的问题，可以使用margin:-1px解决
在使用了后，出现了颜色不一致的问题，因为我内部元素的颜色和外部边框的颜色不一样。
应该是显示外部的，但是实际效果是显示的内部元素的边框颜色

解决方法就是加上:after在模拟一个外部边框的颜色

伪元素的优势：

独立控制：伪元素如 :before 和 :after 是独立的虚拟元素，可以完全控制其位置、颜色、大小等属性，而不会影响或与实际的元素边框重叠。
避免重叠：通过定位伪元素，你可以让其覆盖某一部分的实际边框，或者完全避开元素的边框，从而避免颜色不同导致的问题。

假设你有两个相邻的元素，它们的边框颜色不同。你可以使用伪元素来创建一个虚拟的边框，使之看起来像是边框在一起但没有实际重叠。

四、解决方案：

使用第四种方案，css代码如下

<style lang="scss" scoped>
.box {
    padding: 20rpx 32rpx 40rpx 32rpx;
    .Rp {
        width: 686rpx;
        background-color: #f7f8fa;
        border-radius: 16rpx;
        border: 2rpx solid #ced6e2;
        margin-bottom: 32rpx;
        padding-top: 12rpx;
        .h4 {
            font-weight: 600;
            font-size: 40rpx;
            color: #7089ab;
            margin-bottom: 12rpx;
            margin-left: 24rpx;
        }
        .herb-box {
            display: flex;
            flex-wrap: wrap;
            padding: 0 24rpx;
            .herb {
                display: flex;
                align-items: center;
                padding: 18rpx;
                padding-left: 0;
                border-bottom: 2rpx solid #e6e6e6; // 真实的内部元素边框
                position: relative;
                margin-bottom: -1px; // 隐藏重叠的边框
                &::after {
                    // 使用伪元素是为了解决，两个边框颜色不一致，在使用 margin-bottom: -1px 时，显示的颜色为设置为-1的值，应该显示为外部的边框颜色
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: -1rpx;
                    height: 2rpx;
                    background-color: #ced6e2; // 与外层的 .Rp 边框颜色一致
                    z-index: 1; //  确保伪元素位于 .herb 的边框之上
                }
                .name {
                    margin-right: 8rpx;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #435675;
                }
                .weight {
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #435675;
                }
            }
        }
    }
}
</style>