Vant van-button去除边框，自定义样式，改变组件自带的样式属性

最新推荐文章于 2024-08-01 17:54:29 发布

今天代码敲了吗

最新推荐文章于 2024-08-01 17:54:29 发布

阅读量2.2w

点赞数 10

分类专栏： # Vant 文章标签： vue css

本文链接：https://blog.csdn.net/z772330927/article/details/105952909

版权

Vant 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

van-button去除边框，自定义样式

基本语法

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

自定义样式

注意不要给任何类型和参数

<van-button icon="add" class="add"><span class="btn-font">向他求助</span></van-button>
<style>
.add {
  top: 1.33333vw;
  font-size: 5.33333vw;
  position: relative;
  left: 31vw;
  border: none;
  color: #6ac2f6;
  background: white;
}
.btn-font {
  color: #4aa4c3;
  font-size: 16px;
  position: relative;
  top: -2px;
}
</style>

在这里插入图片描述
这样边框就消失了，样式就可以自定义了

改变组件自带的样式属性

就拿Vant中的Step步骤条为例

在这里插入图片描述
找到对应的样式，改变其中的样式

注意改变组件里面的样式必须得在类的前面加 /deep/ style里面也要添加，lang=‘scss’ scoped

<style lang='scss' scoped>
/deep/ .van-step__circle-container {
  .van-icon {
    font-size: 24px;
  }
  .van-step__circle {
    height: 20px;
    width: 20px;
  }
}
/deep/.van-step__title {
  margin-left: 0;
  -webkit-transform: none;
  transform: none;
  position: relative;
  top: 42px;
  font-size: 10px;
}
/deep/.van-steps--horizontal {
  padding: 6vw 2.66667vw 0;
  .van-steps__items {
    margin-bottom: 32px;
  }
  .van-step__circle-container {
    background: rgba(246, 246, 246, 1);
  }
}
/deep/ .van-steps {
  background: none;
}
</style>