一招告别Vant组件中Cell下划线，解锁你的页面美学新境界！

2024-01-01 13:45:24

让页面更显雅致：轻松去除 Vant 组件中 Cell 下划线

在 Vant 组件中，Cell 组件以其简约、优雅的外观广受青睐。然而，其默认的下划线设计有时会显得多余，影响整体页面的美观。如果你希望让页面更具个性，去除 Cell 下划线绝对是锦上添花之举。

步骤一：引入 Less

Less 是一种强大的 CSS 预处理器，可以帮助我们轻松定制组件样式。在终端中输入以下命令：

npm install less less-loader -D

在 vue.config.js 文件中，找到 module.exports 配置项，添加 less-loader 处理：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
  // ...
};

步骤二：自定义 Less 变量

在 src 目录下创建 common.less 文件，并添加以下 Less 变量：

@cell-border-color: #fff;

步骤三：全局引用 Less 变量

在 main.js 文件中，全局引用 common.less 文件：

import '@/common.less';

步骤四：设置 Cell 边框颜色

最后，在需要去除下划线的 Cell 组件上，设置 border-color 样式为 @cell-border-color 即可：

<van-cell border-color="@cell-border-color">...</van-cell>

恭喜你！现在，你已经成功地去除 Vant 组件中 Cell 的下划线，让页面焕发新的光彩。通过 Less 变量的灵活定制，你可以轻松打造出符合自身设计风格的页面。

代码示例

// common.less
@cell-border-color: #fff;

// main.js
import '@/common.less';

// 页面组件
<template>
  <van-cell border-color="@cell-border-color">...</van-cell>
</template>